This repository has no description
0

Configure Feed

Select the types of activity you want to include in your feed.

fix on mobile

+39 -3
.DS_Store

This is a binary file and will not be displayed.

app/.DS_Store

This is a binary file and will not be displayed.

+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
··· 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>