OpenShock · hhvrc · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026
diff --git a/src/lib/components/PageHeader.svelte b/src/lib/components/PageHeader.svelte
@@ -16,12 +16,12 @@
 </script>
 
 <div class={cn('mb-4 w-full', className)}>
-  <div class="flex w-full flex-wrap items-center gap-x-2 gap-y-1">
-    <h1 class="text-3xl font-bold">
+  <div class="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
+    <h1 class="hidden text-3xl font-bold sm:block">
       {title}
     </h1>
     {#if children}
-      <div class="ml-auto flex flex-wrap items-center justify-end gap-1">
+      <div class="flex flex-wrap items-center gap-1 sm:ml-auto sm:justify-end">
         {@render children()}
       </div>
     {/if}

diff --git a/src/lib/components/Table/DataTableTemplate.svelte b/src/lib/components/Table/DataTableTemplate.svelte
@@ -81,7 +81,7 @@
   });
 </script>
 
-<div class={cn('overflow-y-auto rounded-md border', className)}>
+<div class={cn('overflow-x-auto rounded-md border', className)}>
   <Table.Root>
     <Table.Header>
       {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}

diff --git a/src/routes/(app)/home/+page.svelte b/src/routes/(app)/home/+page.svelte
@@ -33,7 +33,7 @@
     </div>
 
     <!-- Stats cards -->
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
       <Card.Root>
         <Card.Header class="flex flex-row items-center justify-between pb-2">
           <Card.Title class="text-sm font-medium">Shockers</Card.Title>
@@ -83,7 +83,7 @@
     <!-- Quick links -->
     <div>
       <h2 class="mb-3 text-lg font-semibold">Quick Links</h2>
-      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
         <Button
           variant="outline"
           class="h-auto justify-start gap-3 p-4"

diff --git a/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte b/src/routes/(app)/hubs/[hubId=guid]/update/+page.svelte
@@ -356,38 +356,40 @@
             No update history found for this hub.
           </p>
         {:else}
-          <Table.Root class="w-full">
-            <Table.Header>
-              <Table.Row>
-                <Table.Head>ID</Table.Head>
-                <Table.Head>Started</Table.Head>
-                <Table.Head>Status</Table.Head>
-                <Table.Head>Version</Table.Head>
-                <Table.Head>Message</Table.Head>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {#each otaLogs as otaLog (otaLog.id)}
+          <div class="overflow-x-auto">
+            <Table.Root class="w-full">
+              <Table.Header>
                 <Table.Row>
-                  <Table.Cell class="text-muted-foreground font-mono text-xs">
-                    {NumberToHexPadded(otaLog.id, 8)}
-                  </Table.Cell>
-                  <Table.Cell class="text-sm" title={otaLog.startedAt.toLocaleString()}>
-                    {formatRelativeTime(otaLog.startedAt)}
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Badge variant={getStatusBadgeVariant(otaLog.status)}>
-                      {otaLog.status}
-                    </Badge>
-                  </Table.Cell>
-                  <Table.Cell class="font-mono text-sm">{otaLog.version}</Table.Cell>
-                  <Table.Cell class="text-muted-foreground max-w-xs truncate text-sm">
-                    {otaLog.message ?? '-'}
-                  </Table.Cell>
+                  <Table.Head>ID</Table.Head>
+                  <Table.Head>Started</Table.Head>
+                  <Table.Head>Status</Table.Head>
+                  <Table.Head>Version</Table.Head>
+                  <Table.Head>Message</Table.Head>
                 </Table.Row>
-              {/each}
-            </Table.Body>
-          </Table.Root>
+              </Table.Header>
+              <Table.Body>
+                {#each otaLogs as otaLog (otaLog.id)}
+                  <Table.Row>
+                    <Table.Cell class="text-muted-foreground font-mono text-xs">
+                      {NumberToHexPadded(otaLog.id, 8)}
+                    </Table.Cell>
+                    <Table.Cell class="text-sm" title={otaLog.startedAt.toLocaleString()}>
+                      {formatRelativeTime(otaLog.startedAt)}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Badge variant={getStatusBadgeVariant(otaLog.status)}>
+                        {otaLog.status}
+                      </Badge>
+                    </Table.Cell>
+                    <Table.Cell class="font-mono text-sm">{otaLog.version}</Table.Cell>
+                    <Table.Cell class="text-muted-foreground max-w-xs truncate text-sm">
+                      {otaLog.message ?? '-'}
+                    </Table.Cell>
+                  </Table.Row>
+                {/each}
+              </Table.Body>
+            </Table.Root>
+          </div>
         {/if}
       </Card.Content>
     </Card.Root>

diff --git a/src/routes/(app)/profile/+page.svelte b/src/routes/(app)/profile/+page.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Container>
-  <h1 class="text-3xl font-bold">Profile</h1>
+  <h1 class="hidden text-3xl font-bold sm:block">Profile</h1>
   <div
     class="border-border bg-card flex w-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-20"
   >

diff --git a/src/routes/(app)/settings/api-tokens/+page.svelte b/src/routes/(app)/settings/api-tokens/+page.svelte
@@ -17,7 +17,7 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
-  import * as Card from '$lib/components/ui/card';
+  import PageHeader from '$lib/components/PageHeader.svelte';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
@@ -74,23 +74,18 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
-      API Tokens
-      <div>
-        <Button href={resolve('/settings/api-tokens/new')}>
-          <Plus />
-          Generate Token
-        </Button>
-        <Button onclick={refresh}>
-          <RotateCcw />
-          Refresh
-        </Button>
-      </div>
-    </Card.Title>
-    <Card.Description>API Tokens are used to authenticate with the OpenShock API</Card.Description>
-  </Card.Header>
-  <Card.Content class="flex w-full flex-col space-y-4">
-    <DataTable data={tokens} {columns} {sorting} />
-  </Card.Content>
+  <PageHeader
+    title="API Tokens"
+    subtitle="API Tokens are used to authenticate with the OpenShock API"
+  >
+    <Button href={resolve('/settings/api-tokens/new')}>
+      <Plus />
+      Generate Token
+    </Button>
+    <Button onclick={refresh}>
+      <RotateCcw />
+      Refresh
+    </Button>
+  </PageHeader>
+  <DataTable data={tokens} {columns} {sorting} />
 </Container>
diff --git a/src/routes/(app)/settings/api-tokens/new/+page.svelte b/src/routes/(app)/settings/api-tokens/new/+page.svelte
@@ -183,7 +183,7 @@
 </script>
 
 <Container class="items-center-safe justify-center-safe overflow-y-auto">
-  <Card.Root class="w-lg max-w-2xl shrink-0">
+  <Card.Root class="w-full max-w-2xl shrink-0">
     {#if parseError}
       <Card.Header>
         <Card.Title class="text-2xl">API Token Request</Card.Title>

diff --git a/src/routes/(app)/settings/connections/+page.svelte b/src/routes/(app)/settings/connections/+page.svelte
@@ -8,8 +8,8 @@
   import type { OAuthConnectionResponse } from '$lib/api';
   import { GetOAuthAuthorizeUrl } from '$lib/api/next/oauth';
   import Container from '$lib/components/Container.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
   import { Button } from '$lib/components/ui/button';
-  import * as Card from '$lib/components/ui/card';
   import * as Dropdown from '$lib/components/ui/dropdown-menu';
   import * as Separator from '$lib/components/ui/separator';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
@@ -96,22 +96,17 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between text-3xl">
-      OAuth Connections
-      <div class="flex items-center gap-2">
-        <Button variant="ghost" onclick={refresh} disabled={loading} aria-busy={loading}>
-          <RotateCcw class="mr-2 size-4" />
-          {loading ? 'Refreshing…' : 'Refresh'}
-        </Button>
-      </div>
-    </Card.Title>
-    <Card.Description>
-      Link or unlink third-party accounts to sign in faster and keep your profile in sync.
-    </Card.Description>
-  </Card.Header>
-
-  <Card.Content class="w-full space-y-6">
+  <PageHeader
+    title="OAuth Connections"
+    subtitle="Link or unlink third-party accounts to sign in faster and keep your profile in sync."
+  >
+    <Button variant="outline" onclick={refresh} disabled={loading} aria-busy={loading}>
+      <RotateCcw class="size-4" />
+      {loading ? 'Refreshing…' : 'Refresh'}
+    </Button>
+  </PageHeader>
+
+  <div class="w-full space-y-6">
     <!-- Quick actions -->
     <div class="flex flex-wrap gap-2">
       <Dropdown.Root>
@@ -194,7 +189,7 @@
         {/each}
       </div>
     {/if}
-  </Card.Content>
+  </div>
 </Container>
 
 <!-- Confirm dialog lives once at root -->

diff --git a/src/routes/(app)/settings/sessions/+page.svelte b/src/routes/(app)/settings/sessions/+page.svelte
@@ -15,7 +15,7 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
-  import * as Card from '$lib/components/ui/card';
+  import PageHeader from '$lib/components/PageHeader.svelte';
   import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
@@ -74,20 +74,14 @@
 </script>
 
 <Container>
-  <Card.Header class="w-full">
-    <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
-      Sessions
-      <Button class="text-xl" onclick={onRefreshClicked}>
-        <RotateCcw />
-        <span> Refresh </span>
-      </Button>
-    </Card.Title>
-    <Card.Description>
-      This is a list of all active sessions of your account. Revoke any sessions you do not
-      recognize.
-    </Card.Description>
-  </Card.Header>
-  <Card.Content class="w-full">
-    <DataTable {data} {columns} {sorting} />
-  </Card.Content>
+  <PageHeader
+    title="Sessions"
+    subtitle="This is a list of all active sessions of your account. Revoke any sessions you do not recognize."
+  >
+    <Button onclick={onRefreshClicked}>
+      <RotateCcw />
+      Refresh
+    </Button>
+  </PageHeader>
+  <DataTable {data} {columns} {sorting} />
 </Container>
diff --git a/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte b/src/routes/(app)/shares/public/[shareId=guid]/edit/+page.svelte
@@ -109,19 +109,35 @@
 <DialogAddShocker bind:open={showAddShockerModal} {onAddedShockers} />
 
 <div class="m-5 flex h-full w-full flex-col gap-10">
-  <div class="grid grid-cols-3 grid-rows-1 items-center gap-4">
-    <div class="flex w-full flex-col">
-      <h1 class="text-2xl font-bold">
-        Public Share: {publicShareData?.name ?? 'Loading...'}
-      </h1>
-      <p class="text-muted-foreground text-sm">Editing — changes apply when you save.</p>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-start justify-between gap-2">
+      <div class="flex flex-col">
+        <h1 class="hidden text-2xl font-bold sm:block">
+          Public Share: {publicShareData?.name ?? 'Loading...'}
+        </h1>
+        <p class="text-muted-foreground text-sm">Editing — changes apply when you save.</p>
+      </div>
+      {#if publicShareData}
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <span
+              class="flex flex-row items-center gap-2 rounded-md px-2 py-1 outline-1 outline-gray-500"
+            >
+              <Avatar.Root class="h-7 w-7">
+                <Avatar.Image src={publicShareData.author.image} alt="User Avatar" />
+                <Avatar.Fallback>{publicShareData.author.name.charAt(0)}</Avatar.Fallback>
+              </Avatar.Root>
+              <p class="hidden text-sm sm:block">{publicShareData.author.name}</p>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content><p>Shared by {publicShareData.author.name}</p></Tooltip.Content>
+        </Tooltip.Root>
+      {/if}
     </div>
 
-    <div class="flex items-center">
-      <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
-    </div>
+    <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
 
-    <div class="flex items-center justify-end gap-2">
+    <div class="flex flex-wrap gap-2">
       <Button variant="outline" href={publicUrl}>
         <ExternalLink />
         View
@@ -138,27 +154,6 @@
         <Save />
         {isSaving ? 'Saving...' : 'Save'}
       </Button>
-
-      {#if publicShareData}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            <span
-              class="ml-2 flex flex-row items-center rounded-md px-3 py-1.5 outline-1 outline-gray-500"
-            >
-              <Avatar.Root class="h-8 w-8">
-                <Avatar.Image src={publicShareData.author.image} alt="User Avatar" />
-                <Avatar.Fallback>
-                  {publicShareData.author.name.charAt(0)}
-                </Avatar.Fallback>
-              </Avatar.Root>
-              <p class="ml-3 text-sm">{publicShareData.author.name}</p>
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content>
-            <p>Shared by</p>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      {/if}
     </div>
   </div>
 

diff --git a/src/routes/(app)/shares/user/incoming/+page.svelte b/src/routes/(app)/shares/user/incoming/+page.svelte
@@ -32,7 +32,7 @@
     <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
   </div>
 {:then}
-  <div class="mb-6 overflow-y-auto rounded-md border">
+  <div class="mb-6 overflow-x-auto rounded-md border">
     <Table.Root>
       <Table.Body>
         {#each userSharesState.shares.incoming as incomingShare, i (incomingShare.id)}

diff --git a/src/routes/(app)/shares/user/invites/+page.svelte b/src/routes/(app)/shares/user/invites/+page.svelte
@@ -23,7 +23,7 @@
     <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
   </div>
 {:then}
-  <div class="mb-6 overflow-y-auto rounded-md border">
+  <div class="mb-6 overflow-x-auto rounded-md border">
     <Table.Root>
       <Table.Body>
         {#each userSharesState.outgoingInvites as invite (invite.id)}
@@ -43,7 +43,7 @@
     <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
   </div>
 {:then}
-  <div class="mb-6 overflow-y-auto rounded-md border">
+  <div class="mb-6 overflow-x-auto rounded-md border">
     <Table.Root>
       <Table.Body>
         {#each userSharesState.incomingInvites as invite (invite.id)}

diff --git a/src/routes/(app)/shares/user/outgoing/+page.svelte b/src/routes/(app)/shares/user/outgoing/+page.svelte
@@ -31,7 +31,7 @@
     <Spinner class="size-8 text-gray-600 dark:text-gray-300" />
   </div>
 {:then}
-  <div class="mb-6 overflow-y-auto rounded-md border">
+  <div class="mb-6 overflow-x-auto rounded-md border">
     <Table.Root>
       <Table.Body>
         {#each userSharesState.shares.outgoing as userShare, i (userShare.id)}

diff --git a/src/routes/(app)/shockers/own/+page.svelte b/src/routes/(app)/shockers/own/+page.svelte
@@ -188,7 +188,7 @@
     </div>
   {:else}
     <div class="flex w-full flex-wrap items-center justify-between gap-2">
-      <h1 class="text-2xl font-bold">Shockers</h1>
+      <h1 class="hidden text-2xl font-bold sm:block">Shockers</h1>
       <div class="flex flex-wrap items-center gap-1">
         <Button
           variant="secondary"