Skip to content

Commit bec58ac

Browse files
C4illinC4illin
committed
fix: mobile view overflow
1 parent 83d7126 commit bec58ac

File tree

2 files changed

+197
-62
lines changed

2 files changed

+197
-62
lines changed

‎src/index.tsx

Lines changed: 162 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,12 @@ const app = new Elysia({
153153

154154
return (
155155
<BaseHtml title="ConvertX | Setup" webroot={WEBROOT}>
156-
<main class="mx-auto w-full max-w-4xl px-4">
156+
<main
157+
class={`
158+
mx-auto w-full max-w-4xl px-2
159+
sm:px-4
160+
`}
161+
>
157162
<h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
158163
<article class="article p-0">
159164
<header class="w-full bg-neutral-800 p-4">
@@ -217,7 +222,12 @@ const app = new Elysia({
217222
accountRegistration={ACCOUNT_REGISTRATION}
218223
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
219224
/>
220-
<main class="w-full px-4">
225+
<main
226+
class={`
227+
w-full px-2
228+
sm:px-4
229+
`}
230+
>
221231
<article class="article">
222232
<form method="post" class="flex flex-col gap-4">
223233
<fieldset class="mb-4 flex flex-col gap-4">
@@ -343,7 +353,12 @@ const app = new Elysia({
343353
accountRegistration={ACCOUNT_REGISTRATION}
344354
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
345355
/>
346-
<main class="w-full px-4">
356+
<main
357+
class={`
358+
w-full px-2
359+
sm:px-4
360+
`}
361+
>
347362
<article class="article">
348363
<form method="post" class="flex flex-col gap-4">
349364
<fieldset class="mb-4 flex flex-col gap-4">
@@ -556,15 +571,20 @@ const app = new Elysia({
556571
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
557572
loggedIn
558573
/>
559-
<main class="w-full px-4">
574+
<main
575+
class={`
576+
w-full px-2
577+
sm:px-4
578+
`}
579+
>
560580
<article class="article">
561581
<h1 class="mb-4 text-xl">Convert</h1>
562582
<div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
563583
<table
564584
id="file-list"
565585
class={`
566586
w-full table-auto rounded bg-neutral-900
567-
[&_td]:p-4
587+
[&_td]:p-4 [&_td]:first:max-w-[30vw] [&_td]:first:truncate
568588
[&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
569589
`}
570590
/>
@@ -942,7 +962,8 @@ const app = new Elysia({
942962
let userJobs = db
943963
.query("SELECT * FROM jobs WHERE user_id = ?")
944964
.as(Jobs)
945-
.all(user.id);
965+
.all(user.id)
966+
.reverse();
946967

947968
for (const job of userJobs) {
948969
const files = db
@@ -964,31 +985,75 @@ const app = new Elysia({
964985
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
965986
loggedIn
966987
/>
967-
<main class="w-full px-4">
988+
<main
989+
class={`
990+
w-full px-2
991+
sm:px-4
992+
`}
993+
>
968994
<article class="article">
969995
<h1 class="mb-4 text-xl">Results</h1>
970996
<table
971997
class={`
972-
w-full table-auto rounded bg-neutral-900 text-left
998+
w-full table-auto overflow-y-auto rounded bg-neutral-900 text-left
973999
[&_td]:p-4
9741000
[&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
9751001
`}
9761002
>
9771003
<thead>
9781004
<tr>
979-
<th class="px-4 py-2">Time</th>
980-
<th class="px-4 py-2">Files</th>
981-
<th class="px-4 py-2">Files Done</th>
982-
<th class="px-4 py-2">Status</th>
983-
<th class="px-4 py-2">View</th>
1005+
<th
1006+
class={`
1007+
px-2 py-2
1008+
sm:px-4
1009+
`}
1010+
>
1011+
Time
1012+
</th>
1013+
<th
1014+
class={`
1015+
px-2 py-2
1016+
sm:px-4
1017+
`}
1018+
>
1019+
Files
1020+
</th>
1021+
<th
1022+
class={`
1023+
px-2 py-2
1024+
max-sm:hidden
1025+
sm:px-4
1026+
`}
1027+
>
1028+
Files Done
1029+
</th>
1030+
<th
1031+
class={`
1032+
px-2 py-2
1033+
sm:px-4
1034+
`}
1035+
>
1036+
Status
1037+
</th>
1038+
<th
1039+
class={`
1040+
px-2 py-2
1041+
sm:px-4
1042+
`}
1043+
>
1044+
View
1045+
</th>
9841046
</tr>
9851047
</thead>
9861048
<tbody>
9871049
{userJobs.map((job) => (
9881050
<tr>
989-
<td safe>{job.date_created}</td>
1051+
<td safe>
1052+
{job.date_created.split("T")[1]?.split(".")[0] ??
1053+
job.date_created}
1054+
</td>
9901055
<td>{job.num_files}</td>
991-
<td>{job.finished_files}</td>
1056+
<td class="max-sm:hidden">{job.finished_files}</td>
9921057
<td safe>{job.status}</td>
9931058
<td>
9941059
<a
@@ -1055,7 +1120,12 @@ const app = new Elysia({
10551120
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
10561121
loggedIn
10571122
/>
1058-
<main class="w-full px-4">
1123+
<main
1124+
class={`
1125+
w-full px-2
1126+
sm:px-4
1127+
`}
1128+
>
10591129
<article class="article">
10601130
<div class="mb-4 flex items-center justify-between">
10611131
<h1 class="text-xl">Results</h1>
@@ -1095,16 +1165,46 @@ const app = new Elysia({
10951165
>
10961166
<thead>
10971167
<tr>
1098-
<th class="px-4 py-2">Converted File Name</th>
1099-
<th class="px-4 py-2">Status</th>
1100-
<th class="px-4 py-2">View</th>
1101-
<th class="px-4 py-2">Download</th>
1168+
<th
1169+
class={`
1170+
px-2 py-2
1171+
sm:px-4
1172+
`}
1173+
>
1174+
Converted File Name
1175+
</th>
1176+
<th
1177+
class={`
1178+
px-2 py-2
1179+
sm:px-4
1180+
`}
1181+
>
1182+
Status
1183+
</th>
1184+
<th
1185+
class={`
1186+
px-2 py-2
1187+
sm:px-4
1188+
`}
1189+
>
1190+
View
1191+
</th>
1192+
<th
1193+
class={`
1194+
px-2 py-2
1195+
sm:px-4
1196+
`}
1197+
>
1198+
Download
1199+
</th>
11021200
</tr>
11031201
</thead>
11041202
<tbody>
11051203
{files.map((file) => (
11061204
<tr>
1107-
<td safe>{file.output_file_name}</td>
1205+
<td safe class="max-w-[20vw] truncate">
1206+
{file.output_file_name}
1207+
</td>
11081208
<td safe>{file.status}</td>
11091209
<td>
11101210
<a
@@ -1217,16 +1317,46 @@ const app = new Elysia({
12171317
>
12181318
<thead>
12191319
<tr>
1220-
<th class="px-4 py-2">Converted File Name</th>
1221-
<th class="px-4 py-2">Status</th>
1222-
<th class="px-4 py-2">View</th>
1223-
<th class="px-4 py-2">Download</th>
1320+
<th
1321+
class={`
1322+
px-2 py-2
1323+
sm:px-4
1324+
`}
1325+
>
1326+
Converted File Name
1327+
</th>
1328+
<th
1329+
class={`
1330+
px-2 py-2
1331+
sm:px-4
1332+
`}
1333+
>
1334+
Status
1335+
</th>
1336+
<th
1337+
class={`
1338+
px-2 py-2
1339+
sm:px-4
1340+
`}
1341+
>
1342+
View
1343+
</th>
1344+
<th
1345+
class={`
1346+
px-2 py-2
1347+
sm:px-4
1348+
`}
1349+
>
1350+
Download
1351+
</th>
12241352
</tr>
12251353
</thead>
12261354
<tbody>
12271355
{files.map((file) => (
12281356
<tr>
1229-
<td safe>{file.output_file_name}</td>
1357+
<td safe class="max-w-[20vw] truncate">
1358+
{file.output_file_name}
1359+
</td>
12301360
<td safe>{file.status}</td>
12311361
<td>
12321362
<a
@@ -1305,7 +1435,12 @@ const app = new Elysia({
13051435
allowUnauthenticated={ALLOW_UNAUTHENTICATED}
13061436
loggedIn
13071437
/>
1308-
<main class="w-full px-4">
1438+
<main
1439+
class={`
1440+
w-full px-2
1441+
sm:px-4
1442+
`}
1443+
>
13091444
<article class="article">
13101445
<h1 class="mb-4 text-xl">Converters</h1>
13111446
<table

‎src/main.css

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'tailwindcss';
1+
@import "tailwindcss";
22

33
@plugin 'tailwind-scrollbar';
44

@@ -37,42 +37,42 @@
3737
}
3838

3939
@utility article {
40-
@apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
40+
@apply px-2 sm:px-4 py-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
4141
}
4242

4343
@utility btn-primary {
44-
@apply bg-accent-500 text-contrast rounded-sm p-4 hover:bg-accent-400 cursor-pointer transition-colors;
44+
@apply bg-accent-500 text-contrast rounded-sm p-2 sm:p-4 hover:bg-accent-400 cursor-pointer transition-colors;
4545
}
4646

47-
:root {
48-
--contrast: 255, 255, 255;
49-
--neutral-900: 243, 244, 246;
50-
--neutral-800: 229, 231, 235;
51-
--neutral-700: 209, 213, 219;
52-
--neutral-600: 156, 163, 175;
53-
--neutral-500: 180, 180, 180;
54-
--neutral-400: 75, 85, 99;
55-
--neutral-300: 55, 65, 81;
56-
--neutral-200: 31, 41, 55;
57-
--neutral-100: 17, 24, 39;
58-
--accent-400: 132, 204, 22;
59-
--accent-500: 101, 163, 13;
60-
--accent-600: 77, 124, 15;
61-
}
62-
63-
@media (prefers-color-scheme: dark) {
64-
:root {
65-
--contrast: 0, 0, 0;
66-
--neutral-900: 17, 24, 39;
67-
--neutral-800: 31, 41, 55;
68-
--neutral-700: 55, 65, 81;
69-
--neutral-600: 75, 85, 99;
70-
--neutral-500: 107, 114, 128;
71-
--neutral-300: 209, 213, 219;
72-
--neutral-400: 156, 163, 175;
73-
--neutral-200: 229, 231, 235;
74-
--accent-600: 101, 163, 13;
75-
--accent-500: 132, 204, 22;
76-
--accent-400: 163, 230, 53;
77-
}
78-
}
47+
:root {
48+
--contrast: 255, 255, 255;
49+
--neutral-900: 243, 244, 246;
50+
--neutral-800: 229, 231, 235;
51+
--neutral-700: 209, 213, 219;
52+
--neutral-600: 156, 163, 175;
53+
--neutral-500: 180, 180, 180;
54+
--neutral-400: 75, 85, 99;
55+
--neutral-300: 55, 65, 81;
56+
--neutral-200: 31, 41, 55;
57+
--neutral-100: 17, 24, 39;
58+
--accent-400: 132, 204, 22;
59+
--accent-500: 101, 163, 13;
60+
--accent-600: 77, 124, 15;
61+
}
62+
63+
@media (prefers-color-scheme: dark) {
64+
:root {
65+
--contrast: 0, 0, 0;
66+
--neutral-900: 17, 24, 39;
67+
--neutral-800: 31, 41, 55;
68+
--neutral-700: 55, 65, 81;
69+
--neutral-600: 75, 85, 99;
70+
--neutral-500: 107, 114, 128;
71+
--neutral-300: 209, 213, 219;
72+
--neutral-400: 156, 163, 175;
73+
--neutral-200: 229, 231, 235;
74+
--accent-600: 101, 163, 13;
75+
--accent-500: 132, 204, 22;
76+
--accent-400: 163, 230, 53;
77+
}
78+
}

0 commit comments

Comments
 (0)