Skip to content

Commit 9bb4349

Browse files
hyochanhyochan
committed
chore: enhance mobile layout
1 parent 9a9fcc5 commit 9bb4349

File tree

13 files changed

+291
-228
lines changed

13 files changed

+291
-228
lines changed

‎app/[lang]/(common)/Header/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,13 +308,15 @@ export default function Header(props: Props): ReactElement {
308308
'h-[56px] decoration-0 bg-basic sticky',
309309
'flex flex-row items-center justify-between',
310310
'px-[28px]',
311+
'w-full min-w-0',
311312
)}
312313
>
313314
<div
314315
className={clsx(
315316
'flex-1 h-14',
316317
'flex flex-row items-center',
317318
'justify-between',
319+
'min-w-0',
318320
)}
319321
>
320322
<div

‎app/[lang]/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ export default async function LangLayout(props: Props): Promise<ReactElement> {
3030
className={clsx(
3131
'text-center flex-1 self-stretch relative',
3232
'flex flex-col-reverse',
33+
'min-w-0 overflow-x-hidden',
3334
)}
3435
>
35-
<div className={clsx('h-[calc(100vh-56px)]', 'flex')}>
36+
<div className={clsx('h-[calc(100vh-56px)]', 'flex w-full min-w-0')}>
3637
{children}
3738
</div>
3839
<Header

‎app/[lang]/recent-list/GithubUserList.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,21 @@ export default function GithubUserList({t, initialData}: Props): ReactElement {
151151
return (
152152
<div className="flex-1 flex flex-col mx-6 mb-12 max-[480px]:mx-4 max-[480px]:mb-8 overflow-hidden">
153153
{/* Tier filter labels */}
154-
<div className="flex flex-wrap gap-2 mb-4">
154+
<div
155+
className={clsx(
156+
styles.horizontalScroll,
157+
'w-full max-w-full min-w-0',
158+
'flex flex-nowrap gap-2 mb-4',
159+
'pr-2',
160+
)}
161+
>
155162
<button
156163
onClick={() => handleTierSelect(null)}
157164
disabled={isLoadingTier}
158165
className={clsx(
159166
'px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200',
160167
'border',
168+
'shrink-0',
161169
!selectedTier
162170
? 'bg-brand text-white border-brand'
163171
: 'bg-black/5 dark:bg-white/5 text-basic border-black/10 dark:border-white/10 hover:bg-black/10 dark:hover:bg-white/10',
@@ -170,23 +178,30 @@ export default function GithubUserList({t, initialData}: Props): ReactElement {
170178
<button
171179
key={tier}
172180
onClick={() => handleTierSelect(tier)}
173-
disabled={isLoadingTier}
174-
className={clsx(
175-
'px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200',
176-
'border flex items-center gap-1.5',
177-
selectedTier === tier
178-
? 'bg-brand text-white border-brand'
179-
: 'bg-black/5 dark:bg-white/5 text-basic border-black/10 dark:border-white/10 hover:bg-black/10 dark:hover:bg-white/10',
180-
isLoadingTier && 'opacity-50 cursor-not-allowed',
181-
)}
181+
disabled={isLoadingTier}
182+
className={clsx(
183+
'px-3 py-1.5 max-[480px]:px-2 max-[480px]:py-1',
184+
'rounded-full text-xs font-medium transition-all duration-200',
185+
'border flex items-center justify-center gap-1.5 max-[480px]:gap-0',
186+
'min-w-[70px] whitespace-nowrap',
187+
'max-[480px]:min-w-[44px] max-[480px]:max-w-[60px]',
188+
'shrink-0',
189+
selectedTier === tier
190+
? 'bg-brand text-white border-brand'
191+
: 'bg-black/5 dark:bg-white/5 text-basic border-black/10 dark:border-white/10 hover:bg-black/10 dark:hover:bg-white/10',
192+
isLoadingTier && 'opacity-50 cursor-not-allowed',
193+
)}
194+
aria-label={tier}
182195
>
183196
<Image
184197
alt={tier}
185198
src={getTierSvg(tier)}
186199
width={14}
187200
height={14}
188201
/>
189-
{tier}
202+
<span className="max-[480px]:hidden whitespace-nowrap">
203+
{tier}
204+
</span>
190205
</button>
191206
))}
192207
</div>

‎app/[lang]/recent-list/TopTierUsers.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,15 @@ export default function TopTierUsers({title}: Props): ReactElement {
6666
}
6767

6868
return (
69-
<div className="flex flex-col max-w-[500px]">
69+
<div className="flex flex-col w-full max-w-full">
7070
<span className="text-[10px] text-placeholder mb-1">{title}</span>
71-
<div className="flex flex-row gap-2">
71+
<div
72+
className={clsx(
73+
styles.horizontalScroll,
74+
'w-full max-w-full min-w-0',
75+
'flex flex-nowrap gap-2 pr-2',
76+
)}
77+
>
7278
{topTierUsers.map((user) => (
7379
<a
7480
key={user.login}

‎app/[lang]/recent-list/page.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {getSupabaseClient} from '../../../server/supabaseClient';
66
import type {UserListItem} from '../../../src/fetches/recentList';
77
import {getTranslates} from '../../../src/localization';
88
import {getUserPlugins} from '../../../src/utils/functions';
9+
import styles from '../styles.module.css';
910

1011
import GithubUserList from './GithubUserList';
1112
import TopTierUsers from './TopTierUsers';
@@ -39,8 +40,8 @@ export default async function Page(props: Props): Promise<ReactElement> {
3940
<div
4041
className={clsx(
4142
'mt-4 mb-[32px] px-6 w-full',
42-
'flex flex-row items-center justify-between gap-4',
43-
'max-[480px]:flex-col max-[480px]:items-start max-[480px]:mb-6 max-[480px]:mt-2',
43+
'flex flex-row items-start gap-4',
44+
'max-[768px]:flex-col max-[480px]:mb-6 max-[480px]:mt-2',
4445
)}
4546
>
4647
<H1
@@ -52,12 +53,29 @@ export default async function Page(props: Props): Promise<ReactElement> {
5253
>
5354
{recentList.title}
5455
</H1>
55-
<TopTierUsers title={recentList.topRanked} />
56-
<GreatFrontEnd
57-
className="max-w-[400px] shrink-0 max-[480px]:mt-2 max-[480px]:max-w-full max-[768px]:hidden"
58-
href="https://www.greatfrontend.com/questions/formats/quiz?fpr=hyo73"
59-
title="Quiz interview questions"
60-
/>
56+
<div
57+
className={clsx(
58+
styles.horizontalScroll,
59+
'flex-1 min-w-0 w-full',
60+
)}
61+
>
62+
<div
63+
className={clsx(
64+
'flex flex-row items-start gap-4 flex-nowrap min-w-fit',
65+
)}
66+
>
67+
<div className="shrink-0 min-w-[280px]">
68+
<TopTierUsers title={recentList.topRanked} />
69+
</div>
70+
<div className="shrink-0">
71+
<GreatFrontEnd
72+
className="max-w-[400px] shrink-0 max-[480px]:mt-2 max-[480px]:max-w-full max-[768px]:hidden"
73+
href="https://www.greatfrontend.com/questions/formats/quiz?fpr=hyo73"
74+
title="Quiz interview questions"
75+
/>
76+
</div>
77+
</div>
78+
</div>
6179
</div>
6280
<GithubUserList
6381
initialData={userPlugins as UserListItem[]}

‎app/[lang]/stats/Container.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export default function Container({t, children, headerSearch, headerRight}: Prop
2020
return (
2121
<div
2222
className={clsx(
23-
'flex-1 bg-paper overflow-y-auto overflow-x-hidden',
23+
'flex-1 w-full max-w-full min-w-0',
24+
'bg-paper overflow-y-auto overflow-x-hidden',
2425
'px-6 max-[768px]:px-4 max-[480px]:px-2',
2526
'flex flex-col',
2627
)}

‎app/[lang]/stats/[login]/Scouter/StatsDetails/SectionDooboo.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,15 @@ function SectionHeader({t, stats, endDate}: SectionProps): ReactElement {
6868
: (tiers[tiers.length - 1].tier as ScoreType['tierName']);
6969

7070
return (
71-
<div className={clsx('flex flex-col flex-wrap')}>
71+
<div className={clsx('flex flex-col flex-wrap w-full max-w-full')}>
7272
<p className={clsx('font-bold text-basic text-h2', inter.className)}>
7373
{t.achievement}
7474
</p>
7575
<p className={clsx('text-body3 text-placeholder')}>
7676
{t.achievementDetails}
7777
</p>
7878
{/* Badges */}
79-
<div className={clsx('mt-6', 'flex flex-row')}>
79+
<div className={clsx('mt-6', 'flex flex-row flex-wrap gap-2')}>
8080
{/* Tier badge */}
8181
<div
8282
className={clsx(
@@ -93,24 +93,25 @@ function SectionHeader({t, stats, endDate}: SectionProps): ReactElement {
9393
/>
9494
</div>
9595
{/* AVG score badge */}
96-
<div
97-
className={clsx(
98-
'ml-2 p-2 bg-basic border rounded-md',
99-
'flex items-center',
100-
)}
101-
>
96+
<div className={clsx('p-2 bg-basic border rounded-md', 'flex items-center')}>
10297
<span className="body3 mr-2">{t.avgScore}</span>{' '}
10398
<div className="body3 p-1 bg-contrast-light dark:bg-contrast-dark rounded-md">
10499
<p className="text-[12px] text-white dark:text-black">{score}</p>
105100
</div>
106101
</div>
107102
</div>
108103
{/* Scores */}
109-
<div className={clsx('mt-5', 'flex flex-row items-center flex-wrap')}>
104+
<div
105+
className={clsx(
106+
'mt-5 w-full max-w-full',
107+
'flex flex-wrap items-center',
108+
'gap-x-4 gap-y-2',
109+
)}
110+
>
110111
{statNames.map((name) => {
111112
return (
112-
<div key={name} className={clsx('mr-4 mt-1', 'items-center')}>
113-
<span className="mr-2 text-basic font-bold text-[14px]">
113+
<div key={name} className={clsx('flex items-center gap-2')}>
114+
<span className="text-basic font-bold text-[14px] whitespace-nowrap">
114115
{pluginStats[name].name}
115116
</span>
116117
<div
@@ -126,7 +127,7 @@ function SectionHeader({t, stats, endDate}: SectionProps): ReactElement {
126127
})}
127128
</div>
128129
{/* MonthPicker - positioned between scores and chart */}
129-
<div className="mt-4 flex justify-start">
130+
<div className="mt-4 flex justify-start max-w-full w-full">
130131
<MonthPicker
131132
t={t}
132133
value={endDate}
@@ -191,7 +192,12 @@ export default function SectionDooboo({
191192
...props
192193
}: SectionProps): ReactElement {
193194
return (
194-
<div className={clsx('flex-1', 'flex flex-col')}>
195+
<div
196+
className={clsx(
197+
'flex-1 w-full max-w-full min-w-0',
198+
'flex flex-col',
199+
)}
200+
>
195201
<SectionHeader {...props} endDate={endDate} />
196202
<hr className="my-10 h-[1px] flex-1 text-border-light dark:text-border-dark" />
197203
<SectionBody {...props} />

0 commit comments

Comments
 (0)