fix: responsiveness fixes

src/backend/service/umami.ts

@@ -3,7 +3,7 @@ import { env } from '~/backend/env'
 
 export async function umamiFetchStats(page: string, startAt: number) {
     if (import.meta.env.DEV) {
-        return Promise.resolve({ uniques: { value: 1337 } })
+        return Promise.resolve({ visitors: { value: 1337 } })
     }
 
     const res = await fetch(`${env.UMAMI_HOST}/api/websites/${env.UMAMI_SITE_ID}/stats?${new URLSearchParams({

src/backend/utils/request.ts

@@ -1,5 +1,8 @@
 import type { APIContext, AstroGlobal } from 'astro'
 
 export function getRequestIp(ctx: AstroGlobal | APIContext) {
-    return ctx.request.headers.get('x-forwarded-for') ?? ctx.clientAddress
+    const xForwardedFor = ctx.request.headers.get('x-forwarded-for')
+    if (xForwardedFor) return xForwardedFor.split(',')[0]
+
+    return ctx.clientAddress
 }

src/components/pages/PageMain/PageMain.module.css

@@ -66,14 +66,18 @@
 }
 
 .lastSeenTrigger::before {
-    /* spaces are a crutch to avoid table resizing lol */
-    content: '  (click to expand)';
+    content: '(click to expand)';
     @mixin font-xs;
     margin-left: 1em;
     color: var(--text-secondary);
+    white-space: nowrap;
 
     @media (--tablet) {
-        content: '  (expand)';
+        content: '(expand)';
+    }
+
+    @media (--mobile) {
+        content: '<';
     }
 }
 
@@ -83,11 +87,17 @@
     @media (--tablet) {
         content: '(collapse)';
     }
+
+    @media (--mobile) {
+        content: 'v';
+    }
 }
 
 .lastSeenLinkWrap {
     display: flex;
     align-items: center;
+    overflow: hidden;
+    max-width: 100%;
 
     @media (--tablet) {
         flex-direction: column;
@@ -99,6 +109,9 @@
 .lastSeenLinkWrapInner {
     display: flex;
     align-items: center;
+    width: min-content;
+    overflow: hidden;
+    max-width: 100%;
 }
 
 .lastSeenLink {
@@ -106,7 +119,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
 
     @media (--tablet) {
         max-width: 300px;
@@ -115,12 +127,14 @@
 
 .lastSeenSuffix {
     @mixin font-xs;
+    white-space: nowrap;
 }
 
 .lastSeenSource {
     @mixin font-xs;
     color: var(--text-secondary);
     margin-left: 8px;
+    white-space: nowrap;
 
     @media (--tablet) {
         margin-left: 0;

src/components/ui/TextTable/TextTable.module.css

@@ -1,6 +1,14 @@
 .table {
     border-spacing: 0;
     line-height: 18px;
+
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    overflow: hidden;
+
+    @media (--tablet) {
+        grid-template-columns: 1fr 2fr;
+    }
 }
 
 .name {
@@ -12,13 +20,13 @@
 
 .value {
     padding: 0;
+    overflow: hidden;
 }
 
 .normal {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: pre;
-    display: block;
 }
 
 .normal .value {

src/components/ui/TextTable/TextTable.tsx

@@ -19,15 +19,15 @@ export function TextTable(props: TextTableProps) {
         const value = item.value()
         if (!value) return null
         return (
-            <tr class={css.line}>
-                <td class={css.name}>{item.name}</td>
-                <td class={css.value}>{item.value()}</td>
-            </tr>
+            <>
+                <div class={css.name}>{item.name}</div>
+                <div class={css.value}>{item.value()}</div>
+            </>
         )
     }).filter(Boolean)
 
     return (
-        <table
+        <div
             class={clsx(
                 css.table,
                 props.wrap ? css.wrap : css.normal,
@@ -35,6 +35,6 @@ export function TextTable(props: TextTableProps) {
             )}
         >
             {rows()}
-        </table>
+        </div>
     )
 }