fix(ui): align footer legal bar

packages/ui/components/Footer.wrn

@@ -261,17 +261,11 @@ component Footer {
         </div>
 
         {#if copyright}
-          <div
+          <p
-            class="wrn-footer__bottom"
+            class="wrn-footer__copyright"
           >
-            <div></div>
+            {copyright}
-            <p
+          </p>
-              class="wrn-footer__copyright"
-            >
-              {copyright}
-            </p>
-            <div></div>
-          </div>
         {/if}
 
         <div
@@ -440,17 +434,19 @@ component Footer {
     .wrn-footer__bottom {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      width: min(100%, 90rem);
+      margin-inline: auto;
       align-items: center;
       gap: 1rem;
       padding: 1rem clamp(1rem, 4vw, 3rem);
       color: var(--wrn-color-muted);
-      border-top: 1px solid var(--wrn-color-border);
       font-size: 0.75rem;
       font-weight: 400;
     }
 
     .wrn-footer__bottom--slots {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      border-top: 1px solid var(--wrn-color-border);
     }
 
     .wrn-footer__bottom--slots:not(
@@ -460,17 +456,33 @@ component Footer {
     }
 
     .wrn-footer__copyright {
+      margin: 0;
       text-align: center;
+      white-space: nowrap;
     }
 
     .wrn-footer__copyright-left,
     .wrn-footer__copyright-right {
       display: flex;
+      flex-wrap: wrap;
       min-width: 0;
       align-items: center;
       gap: 0.75rem;
     }
 
+    .wrn-footer__copyright-left a,
+    .wrn-footer__copyright-right a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .wrn-footer__copyright-left a:hover,
+    .wrn-footer__copyright-right a:hover {
+      color: var(--wrn-component-color, var(--wrn-color-primary));
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+
     .wrn-footer__copyright-right {
       justify-content: flex-end;
       text-align: right;
@@ -490,6 +502,13 @@ component Footer {
     .wrn-footer__links {
         grid-template-columns: repeat(3, minmax(0, 1fr));
       }
+    .wrn-footer__bottom--slots {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      }
+    .wrn-footer__copyright {
+        grid-column: 1 / -1;
+        grid-row: 1;
+      }
     }
 
     @media (max-width: 600px) {
@@ -507,6 +526,9 @@ component Footer {
         justify-content: center;
         text-align: center;
       }
+    .wrn-footer__copyright {
+        white-space: normal;
+      }
     }
 
     @media (max-width: 420px) {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -455,6 +455,12 @@ test("footer renders header and link entries with the requested column count", a
   expect(html).toContain("Support");
   expect(html).toContain('href="/contact"');
   expect(html).toContain("Public service platform");
+  expect(html).not.toMatch(
+    /class="wrn-footer__bottom wrn-footer__bottom--slots"[\s\S]*class="wrn-footer__bottom"/,
+  );
+  expect(html).toMatch(
+    /wrn-footer__copyright-left[\s\S]*wrn-footer__copyright[\s\S]*wrn-footer__copyright-right/,
+  );
 });
 
 test("component-system CSS includes responsive, theme-token, focus, and reduced-motion rules", () => {