@@ -16,29 +16,21 @@ body {
1616 background-image : radial-gradient (circle at 50% -20% , # 1e1e2e 0% , transparent 50% );
1717}
1818
19- /* Light theme overrides */
19+
2020body .light-theme {
21- /* background + glass */
2221 --bg : # f9fafb ;
2322 --glass : rgba (0 , 0 , 0 , 0.03 );
2423 --glass-border : rgba (0 , 0 , 0 , 0.07 );
25-
26- /* main card + text */
2724 --card : # ffffff ;
2825 --text-primary : # 111827 ;
2926 --text-secondary : # 4b5563 ;
3027 --text-color : # 111827 ;
31-
32- /* accent */
3328 --accent : # 2563eb ;
34-
35- /* Remove the dark radial gradient */
3629 background-image : none;
3730}
3831
39- /* Layout */
4032.main-layout {
41- max-width : 900 px ;
33+ max-width : 940 px ;
4234 margin : 0 auto;
4335 padding : 6rem 1rem 4rem ;
4436 display : flex;
@@ -69,9 +61,7 @@ body.light-theme {
6961
7062body .light-theme .app-header {
7163 background : # ffffff ;
72- /* solid background */
7364 border-bottom : 1px solid # e5e7eb ;
74- /* clear separation */
7565 box-shadow : 0 2px 10px rgba (0 , 0 , 0 , 0.06 );
7666}
7767
@@ -250,7 +240,7 @@ body.dark-theme .app-header {
250240 cursor : pointer;
251241}
252242
253- /* Result card */
243+
254244.result-card {
255245 width : 100% ;
256246 background : linear-gradient (145deg , rgba (99 , 102 , 241 , 0.1 ), rgba (0 , 0 , 0 , 0 ));
@@ -323,10 +313,10 @@ body.dark-theme .app-header {
323313 color : var (--accent );
324314}
325315
326- /* Recent tray */
327316.recent-tray {
328317 width : 100% ;
329318 margin-top : 2rem ;
319+ overflow : visible;
330320}
331321
332322.recent-header {
@@ -337,19 +327,23 @@ body.dark-theme .app-header {
337327 align-items : center;
338328}
339329
330+
340331.scroll-container {
341332 display : flex;
342333 gap : 1rem ;
343334 overflow-x : auto;
344- padding : 1rem 0 ;
335+ padding : 1rem 16px ;
336+ scroll-padding-right : 16px ;
337+ box-sizing : border-box;
345338}
346339
347340.scroll-container ::-webkit-scrollbar {
348341 display : none;
349342}
350343
351344.recent-item {
352- min-width : 220px ;
345+ width : 260px ;
346+ flex : 0 0 auto;
353347 background : var (--glass );
354348 border : 1px solid var (--glass-border );
355349 padding : 1rem ;
@@ -360,6 +354,10 @@ body.dark-theme .app-header {
360354 flex-shrink : 0 ;
361355}
362356
357+ .recent-item : last-child {
358+ margin-right : 16px ;
359+ }
360+
363361.short-code {
364362 color : var (--accent );
365363 font-weight : bold;
@@ -378,23 +376,16 @@ body.dark-theme .app-header {
378376/* ===============================
379377 MODERN GLASS RECENT TABLE
380378================================= */
381- /* PAGE CONTAINER */
382379.recent-page-container {
383380 width : 100% ;
384381 max-width : 1200px ;
385- /* controls table width */
386382 margin : 0 auto;
387- /* centers */
388383 padding : 0 24px ;
389- /* space left & right */
390384 box-sizing : border-box;
391385}
392386
393- /* Wrapper */
394387.recent-table-wrapper {
395388 width : 100% ;
396- /*margin-top: 20px;
397- margin-bottom: 20px;*/
398389 overflow-x : auto;
399390}
400391
@@ -411,7 +402,6 @@ body.dark-theme .app-header {
411402 min-width : 800px ;
412403}
413404
414- /* Header */
415405.recent-table thead {
416406 background : var (--glass );
417407}
@@ -428,7 +418,6 @@ body.dark-theme .app-header {
428418 white-space : nowrap;
429419}
430420
431- /* Body cells */
432421.recent-table td {
433422 padding : 14px ;
434423 font-size : 14px ;
@@ -439,7 +428,6 @@ body.dark-theme .app-header {
439428 white-space : nowrap;
440429}
441430
442- /* Row hover */
443431.recent-table tbody tr : hover {
444432 background : rgba (255 , 255 , 255 , 0.05 );
445433}
@@ -448,7 +436,6 @@ body.dark-theme .app-header {
448436 COLUMN WIDTH CONTROL
449437================================= */
450438
451- /* # column */
452439.recent-table th : nth-child (1 ),
453440.recent-table td : nth-child (1 ) {
454441 width : 45px ;
@@ -457,26 +444,22 @@ body.dark-theme .app-header {
457444 padding-right : 6px ;
458445}
459446
460- /* Short URL */
461447.recent-table th : nth-child (2 ),
462448.recent-table td : nth-child (2 ) {
463449 width : 170px ;
464450}
465451
466- /* Original URL (main space owner) */
467452.recent-table th : nth-child (3 ),
468453.recent-table td : nth-child (3 ) {
469454 width : 45% ;
470455 min-width : 0 ;
471456}
472457
473- /* Created */
474458.recent-table th : nth-child (4 ),
475459.recent-table td : nth-child (4 ) {
476460 width : 170px ;
477461}
478462
479- /* Visits */
480463.recent-table th : nth-child (5 ),
481464.recent-table td : nth-child (5 ) {
482465 width : 80px ;
@@ -485,7 +468,6 @@ body.dark-theme .app-header {
485468 color : var (--accent-2 );
486469}
487470
488- /* Actions */
489471.recent-table th : nth-child (6 ),
490472.recent-table td : nth-child (6 ) {
491473 width : 120px ;
@@ -506,7 +488,6 @@ body.dark-theme .app-header {
506488 text-decoration : underline;
507489}
508490
509- /* Original URL truncate */
510491.original-url {
511492 word-break : break-all;
512493}
@@ -523,7 +504,6 @@ body.dark-theme .app-header {
523504 color : var (--accent );
524505}
525506
526- /* Created time */
527507.created-time {
528508 font-size : 13px ;
529509 color : var (--muted );
@@ -572,21 +552,19 @@ body.dark-theme .app-header {
572552 border-bottom : 1px solid var (--glass-border );
573553}
574554
575- /* Tablet */
555+
576556@media (max-width : 1024px ) {
577557 .recent-page-container {
578558 padding : 0 18px ;
579559 }
580560}
581561
582- /* Mobile */
583562@media (max-width : 768px ) {
584563 .recent-page-container {
585564 padding : 0 12px ;
586565 }
587566}
588567
589- /* Small phones */
590568@media (max-width : 480px ) {
591569 .recent-page-container {
592570 padding : 0 8px ;
@@ -739,60 +717,24 @@ body.dark-theme .footer-bottom a {
739717 }
740718}
741719
742-
743-
744-
745- /* allow wrapping */
746- /*.recent-tray .recent-item .original-url,
747- .recent-tray .recent-item .original-url a {*/
748- /*display: -webkit-box;*/
749- /*-webkit-box-orient: vertical;
750-
751- -webkit-line-clamp: 3;*/
752- /* ⭐ change 2 or 3 lines here */
753- /*line-clamp: 3;
754-
755- overflow: hidden;
756- text-overflow: ellipsis;
757- text-wrap: balance;
758-
759- white-space: normal;
760- word-break: break-word;
761- overflow-wrap: anywhere;
762- }*/
763-
764- /* IMPORTANT — remove width restriction */
765- /*.recent-tray .recent-item {
766- min-width: 0;*/
767- /* allows shrinking inside flex/grid */
768- /*max-width: 100%;
769- }*/
770-
771720.recent-tray .recent-item .original-url {
772721 max-width : 350px ;
773- /* control width of text block */
774722 min-width : 0 ;
775723}
776724
777725.recent-tray .recent-item .original-url ,
778726.recent-tray .recent-item .original-url a {
779727
780728 display : -webkit-box;
781- /* REQUIRED for line clamp */
782729 -webkit-box-orient : vertical;
783730 -webkit-line-clamp : 2 ;
784- /* show only 2 lines */
785-
786731 overflow : hidden;
787732 text-overflow : ellipsis;
788-
789733 white-space : normal;
790734 word-break : break-all;
791- /* break long URLs */
792735 overflow-wrap : anywhere;
793736}
794737
795- /* container */
796738.recent-tray .recent-item {
797739 min-width : 0 ;
798740 max-width : 100% ;
0 commit comments