this repo has no description
Make textarea wider for small viewport
+34
-24
+34
-24
src/components/compose.css
+34
-24
src/components/compose.css
···
40
40
border-radius: 9999px;
41
41
}
42
42
43
-
#compose-container textarea {
44
-
width: 100%;
45
-
max-width: 100%;
46
-
height: 5em;
47
-
min-height: 5em;
48
-
max-height: 50vh;
49
-
resize: vertical;
50
-
line-height: 1.4;
51
-
border-color: transparent;
52
-
}
53
-
#compose-container textarea:hover {
54
-
border-color: var(--divider-color);
55
-
}
56
-
57
-
@media (min-width: 40em) {
58
-
#compose-container textarea {
59
-
/* font-size: 150%;
60
-
font-size: calc(100% + 50% / var(--text-weight)); */
61
-
max-height: 65vh;
62
-
}
63
-
}
64
-
65
43
@keyframes appear-up {
66
44
0% {
67
45
opacity: 0;
···
129
107
}
130
108
131
109
#compose-container form {
132
-
border-radius: 16px;
133
-
padding: 4px 12px;
110
+
--form-padding-inline: 12px;
111
+
--form-padding-block: 8px;
112
+
/* border-radius: 16px; */
113
+
padding: var(--form-padding-block) var(--form-padding-inline);
134
114
background-color: var(--bg-blur-color);
135
115
/* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
136
116
position: relative;
137
117
z-index: 2;
138
118
--drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
139
119
box-shadow: var(--drop-shadow);
120
+
121
+
@media (min-width: 40em) {
122
+
border-radius: 16px;
123
+
}
140
124
}
141
125
#compose-container .status-preview ~ form {
142
126
box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
127
+
}
128
+
129
+
#compose-container textarea {
130
+
width: 100%;
131
+
max-width: 100%;
132
+
height: 5em;
133
+
min-height: 5em;
134
+
max-height: 50vh;
135
+
resize: vertical;
136
+
line-height: 1.4;
137
+
border-color: transparent;
138
+
139
+
@media (width < 30em) {
140
+
margin-inline: calc(-1 * var(--form-padding-inline));
141
+
width: 100vw !important;
142
+
max-width: 100vw;
143
+
border-radius: 0;
144
+
border: 0;
145
+
}
146
+
147
+
@media (min-width: 40em) {
148
+
max-height: 65vh;
149
+
}
150
+
}
151
+
#compose-container textarea:hover {
152
+
border-color: var(--divider-color);
143
153
}
144
154
145
155
#compose-container .toolbar {