Symmetri i huvudet och i knapparna

Navigationen trycktes ihop mot högerkanten med ett tomrum efter
ordmärket. På smal skärm ligger den nu på egen rad och fördelas över
hela måttet — samma fördelning som sidfoten redan använder. Raden får
sin balans av marginalerna i stället för av att posterna klumpas ihop.
Mätt: noll pixlar kvar på bägge sidor. Portalens sex länkar blir på 360
px en tvåkolumnsindex, vilket läser sig som avsikt och inte som spill.

Knapparna var innehållsbreda, så REQUEST ACCOUNT blev dubbelt så bred
som LOGIN. Två knappar bredvid varandra där den ena är dubbelt så bred
läser sig som en huvudåtgärd och en eftertanke, oavsett vad de heter —
och det är inte förhållandet mellan dem. Rutnätet ger dem samma bredd;
vikten skiljs av fyllning mot kontur, som resten av systemet gör.

Lika bredd räckte inte: REQUEST ACCOUNT bryts till två rader och
knapparna blev då olika HÖGA, vilket är samma obalans en rad ned. Bägge
fyller nu sin cell. Mätt: 163x57 mot 163x57.

---- Och ett test som slutade mäta -------------------------------------

Namntestet från förra ändringen matchade markup-formen, inte
invarianten. När <Link> fick en className hittade mönstret noll knappar
— testet slutade mäta i stället för att falla. Det enda som avslöjade
det var kravet att det ska hitta NÅGOT, och det är därför kravet står
där i stället för att tas för givet.

Mutationstestat igen efter rättelsen: bägge testen faller när
"Customer login" läggs tillbaka.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012EQg3rJsrQ1ZNTvkzmQAtt

felsokning/app/src/pages/alva/Ram.tsx

@@ -49,11 +49,16 @@ export function Ram({ children, portal = false }: { children: ReactNode; portal?
             </span>
           </Link>
 
-          {/* Portalens fem länkar fick inte plats på en telefon och sköt
-              ut dokumentet i sidled i stället för att brytas. Raden bryts
-              nu, med tätare mellanrum på smal skärm. */}
-          <nav aria-label={portal ? "Portal" : "Site"}>
-            <ul className="flex flex-wrap gap-2 sm:gap-6">
+          {/* Portalens länkar fick inte plats på en telefon och sköt ut
+              dokumentet i sidled i stället för att brytas. Raden bryts nu.
+
+              På smal skärm ligger navigationen dessutom på EGEN rad och
+              fördelas över hela måttet, i stället för att tryckas ihop mot
+              höger kant med ett tomrum efter ordmärket. Det är samma
+              fördelning som sidfoten redan använder — raden får sin balans
+              av marginalerna, inte av att posterna klumpas ihop. */}
+          <nav aria-label={portal ? "Portal" : "Site"} className="w-full sm:w-auto">
+            <ul className="flex flex-wrap justify-between gap-x-4 gap-y-2 sm:justify-end sm:gap-6">
               {lankar.map((l) => {
                 const aktiv = plats.pathname === l.till;
                 return (

felsokning/app/src/pages/alva/Start.tsx

@@ -51,12 +51,17 @@ export default function Start() {
             {ALVA.definition}
           </p>
 
-          <div className="mt-10 flex gap-4">
-            <Link to="/alva/ansokan">
-              <Knapp>Request account</Knapp>
+          {/* Lika breda, inte innehållsbreda. Två knappar bredvid varandra
+              där den ena är dubbelt så bred som den andra läser sig som en
+              huvudåtgärd och en eftertanke — och det är inte förhållandet
+              mellan dem. Rutnätet ger dem samma bredd; vikten skiljs av
+              fyllning mot kontur, som resten av systemet gör. */}
+          <div className="mt-10 grid max-w-[420px] grid-cols-2 gap-4">
+            <Link to="/alva/ansokan" className="block h-full">
+              <Knapp bred>Request account</Knapp>
             </Link>
-            <Link to="/alva/logga-in">
-              <Knapp variant="sekundar">Login</Knapp>
+            <Link to="/alva/logga-in" className="block h-full">
+              <Knapp bred variant="sekundar">Login</Knapp>
             </Link>
           </div>
         </div>
@@ -278,12 +283,12 @@ export default function Start() {
           <div className="font-mono text-[11px]" style={{ color: FARG.steel }}>
             {PLATTFORMSVERSION}
           </div>
-          <div className="flex gap-4">
-            <Link to="/alva/ansokan">
-              <Knapp>Request account</Knapp>
+          <div className="grid max-w-[420px] grid-cols-2 gap-4">
+            <Link to="/alva/ansokan" className="block h-full">
+              <Knapp bred>Request account</Knapp>
             </Link>
-            <Link to="/alva/logga-in">
-              <Knapp variant="sekundar">Login</Knapp>
+            <Link to="/alva/logga-in" className="block h-full">
+              <Knapp bred variant="sekundar">Login</Knapp>
             </Link>
           </div>
         </div>