Deploy Seqcolyte Studio

studio/src/app/diagnostics/page.tsx

@@ -11,13 +11,13 @@ export default async function DiagnosticsPage() {
   return (
     <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <header className="border-border/60 shrink-0 border-b">
-        <div className="mx-auto flex w-full max-w-6xl items-center gap-3 px-6 py-4">
-          <Link href="/" className="text-muted-foreground hover:text-foreground" aria-label="Home">
+        <div className="mx-auto flex w-full max-w-6xl items-center gap-3 px-4 py-3 sm:px-6 sm:py-4">
+          <Link href="/" className="text-muted-foreground hover:text-foreground shrink-0" aria-label="Home">
             <ArrowLeft className="size-5" />
           </Link>
-          <div>
-            <h1 className="text-lg font-semibold tracking-tight">Diagnostic wiki</h1>
-            <p className="text-muted-foreground text-sm">
+          <div className="min-w-0">
+            <h1 className="text-base font-semibold tracking-tight sm:text-lg">Diagnostic wiki</h1>
+            <p className="text-muted-foreground hidden text-sm sm:block">
               How to read this: a <strong className="text-foreground font-medium">metric</strong> feeds a{" "}
               <strong className="text-foreground font-medium">signal</strong>, signals point to an{" "}
               <strong className="text-foreground font-medium">issue</strong>, each issue has candidate{" "}
@@ -30,7 +30,7 @@ export default async function DiagnosticsPage() {
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-6xl px-6 py-8">
+        <div className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 sm:py-8">
           {!catalog || catalog.issues.length === 0 ? (
             <Card className="border-dashed">
               <CardHeader className="items-center py-14 text-center">

studio/src/app/page.tsx

@@ -5,6 +5,7 @@ import { listProjects } from "@/lib/store";
 import { PreflightPanel } from "@/components/preflight-panel";
 import { NewProjectButton } from "@/components/new-project-button";
 import { ModeToggle } from "@/components/mode-toggle";
+import { Stethoscope, Layers } from "lucide-react";
 import {
   Card,
   CardDescription,
@@ -87,8 +88,8 @@ export default async function Home() {
   return (
     <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <header className="border-border/60 shrink-0 border-b">
-        <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-6 py-4">
-          <div className="flex items-center gap-3">
+        <div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:gap-4 sm:px-6 sm:py-4">
+          <div className="flex min-w-0 items-center gap-3">
             <div className="ring-border/60 relative size-9 shrink-0 overflow-hidden rounded-lg ring-1">
               <Image
                 src="/seqcolyte-logo.png"
@@ -99,25 +100,31 @@ export default async function Home() {
                 priority
               />
             </div>
-            <div>
-              <h1 className="text-lg font-semibold tracking-tight">Seqcolyte Studio</h1>
-              <p className="text-muted-foreground text-sm">
+            <div className="min-w-0">
+              <h1 className="truncate text-base font-semibold tracking-tight sm:text-lg">
+                Seqcolyte Studio
+              </h1>
+              <p className="text-muted-foreground hidden truncate text-sm sm:block">
                 Root cause analysis for genomic sequencing runs.
               </p>
             </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
             <Link
               href="/diagnostics"
-              className="border-border/70 bg-secondary/60 text-foreground hover:bg-secondary hover:border-border rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
+              aria-label="Diagnostics"
+              className="border-border/70 bg-secondary/60 text-foreground hover:bg-secondary hover:border-border inline-flex items-center justify-center rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors"
             >
-              Diagnostics
+              <Stethoscope className="size-4 sm:hidden" />
+              <span className="hidden sm:inline">Diagnostics</span>
             </Link>
             <Link
               href="/technologies"
-              className="border-border/70 bg-secondary/60 text-foreground hover:bg-secondary hover:border-border rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
+              aria-label="Technologies"
+              className="border-border/70 bg-secondary/60 text-foreground hover:bg-secondary hover:border-border inline-flex items-center justify-center rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors"
             >
-              Technologies
+              <Layers className="size-4 sm:hidden" />
+              <span className="hidden sm:inline">Technologies</span>
             </Link>
             <ModeToggle />
             <NewProjectButton />
@@ -126,7 +133,7 @@ export default async function Home() {
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto grid w-full max-w-6xl gap-6 px-6 py-8 lg:grid-cols-[1fr_20rem]">
+        <div className="mx-auto grid w-full max-w-6xl gap-6 px-4 py-6 sm:px-6 sm:py-8 lg:grid-cols-[1fr_20rem]">
           <div className="space-y-8">
             <section>
               <h2 className="text-foreground mb-3 text-sm font-semibold tracking-wide uppercase">

studio/src/app/technologies/page.tsx

@@ -11,13 +11,13 @@ export default async function TechnologiesPage() {
   return (
     <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <header className="border-border/60 shrink-0 border-b">
-        <div className="mx-auto flex w-full max-w-6xl items-center gap-3 px-6 py-4">
-          <Link href="/" className="text-muted-foreground hover:text-foreground" aria-label="Home">
+        <div className="mx-auto flex w-full max-w-6xl items-center gap-3 px-4 py-3 sm:px-6 sm:py-4">
+          <Link href="/" className="text-muted-foreground hover:text-foreground shrink-0" aria-label="Home">
             <ArrowLeft className="size-5" />
           </Link>
-          <div>
-            <h1 className="text-lg font-semibold tracking-tight">Technologies</h1>
-            <p className="text-muted-foreground text-sm">
+          <div className="min-w-0">
+            <h1 className="text-base font-semibold tracking-tight sm:text-lg">Technologies</h1>
+            <p className="text-muted-foreground hidden text-sm sm:block">
               A collection of single-cell sequencing library structures.
             </p>
           </div>
@@ -25,7 +25,7 @@ export default async function TechnologiesPage() {
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-6xl px-6 py-8">
+        <div className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 sm:py-8">
           {techs.length === 0 ? (
             <Card className="border-dashed">
               <CardHeader className="items-center py-14 text-center">

studio/src/components/new-project-button.tsx

@@ -32,9 +32,9 @@ export function NewProjectButton() {
   }
 
   return (
-    <Button size="sm" onClick={create} disabled={busy}>
+    <Button size="sm" onClick={create} disabled={busy} aria-label="New project">
       {busy ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
-      New project
+      <span className="hidden sm:inline">New project</span>
     </Button>
   );
 }