This repository has no description
fix on mobile
author
damedotblog
date
(Mar 8, 2025, 2:03 PM -0500)
commit
de8c6f24
de8c6f246bd6924f21ba5a1aca7fc46030b1d88e
parent
2d722b0f
2d722b0f9c618d25e5ffe6fd8356300b26767136
+39
-3
.DS_Store
.DS_Store
This is a binary file and will not be displayed.
app/.DS_Store
app/.DS_Store
This is a binary file and will not be displayed.
+35
-2
app/src/app/page.module.css
+35
-2
app/src/app/page.module.css
···
149
149
}
150
150
151
151
.statusUpdateOpen {
152
-
max-height: 1000px; /* Large enough to contain all content */
152
+
max-height: 1200px; /* Large enough to contain all content */
153
153
opacity: 1;
154
154
transform: translateY(0);
155
155
margin-bottom: 2rem;
···
191
191
padding: 2rem;
192
192
}
193
193
194
+
@media (max-width: 600px) {
195
+
.card {
196
+
padding: 1.5rem 1rem;
197
+
}
198
+
}
199
+
194
200
.form {
195
201
margin-top: 1rem;
196
202
}
···
205
211
font-weight: 500;
206
212
}
207
213
214
+
.emojiNote {
215
+
margin: 0 0 0.5rem 0;
216
+
font-size: 0.85rem;
217
+
color: #666;
218
+
font-style: italic;
219
+
}
220
+
208
221
.input {
209
222
width: 100%;
210
223
padding: 0.8rem;
···
269
282
display: grid;
270
283
grid-template-columns: repeat(8, 1fr);
271
284
gap: 0.5rem;
285
+
max-height: 300px;
286
+
overflow-y: auto;
287
+
padding: 0.5rem;
288
+
border: 1px solid #eee;
289
+
border-radius: 8px;
290
+
background-color: #fcfcfc;
272
291
}
273
292
274
293
@media (max-width: 600px) {
275
294
.emojiGrid {
276
295
grid-template-columns: repeat(6, 1fr);
296
+
max-height: 220px;
297
+
overflow-y: auto;
298
+
padding: 0.5rem;
299
+
gap: 0.6rem;
300
+
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
277
301
}
278
302
}
279
303
280
304
@media (max-width: 400px) {
281
305
.emojiGrid {
282
-
grid-template-columns: repeat(4, 1fr);
306
+
grid-template-columns: repeat(5, 1fr);
307
+
max-height: 240px;
283
308
}
284
309
}
285
310
···
294
319
justify-content: center;
295
320
cursor: pointer;
296
321
transition: all 0.2s;
322
+
padding: 8px;
323
+
}
324
+
325
+
@media (max-width: 600px) {
326
+
.emojiButton {
327
+
font-size: 1.5rem;
328
+
padding: 6px;
329
+
}
297
330
}
298
331
299
332
.emojiButton:hover {
+4
-1
app/src/app/page.tsx
+4
-1
app/src/app/page.tsx
···
223
223
const EMOJIS = [
224
224
'🚽', '🧻', '💩', '💨', '🚾', '🧼', '🪠', '🚻', '🩸', '💧', '💦', '😌',
225
225
'😣', '🤢', '🤮', '🥴', '😮💨', '😳', '😵', '🌾', '🍦', '📱', '📖', '💭',
226
-
'1️⃣', '2️⃣', '🟡', '🟤'
226
+
'1️⃣', '2️⃣', '🟡', '🟤', '🫧', '🧽', '📲', '🫥', '🌊', '💤', '👀', '💎',
227
+
'⏱️', '⏰', '🫠', '🤔', '👻', '🧘', '👍', '🙌', '🎮', '🍔', '🥂', '🧠'
227
228
];
228
229
229
230
return (
···
279
280
<form onSubmit={handleSubmit} className={styles.form}>
280
281
<div className={styles.formGroup}>
281
282
<label>Select an emoji for your status</label>
283
+
<p className={styles.emojiNote}>Scroll to see all options</p>
282
284
<div className={styles.emojiGrid}>
283
285
{EMOJIS.map((emoji) => (
284
286
<button
···
289
291
}`}
290
292
onClick={() => handleEmojiSelect(emoji)}
291
293
disabled={isSubmitting}
294
+
aria-label={`Select emoji ${emoji}`}
292
295
>
293
296
{emoji}
294
297
</button>