fix(ui): align footer legal bar

packages/ui/components/Footer.wrn

@@ -261,17 +261,11 @@ component Footer {
         </div>
 
         {#if copyright}
-          <div
-            class="wrn-footer__bottom"
+          <p
+            class="wrn-footer__copyright"
           >
-            <div></div>
-            <p
-              class="wrn-footer__copyright"
-            >
-              {copyright}
-            </p>
-            <div></div>
-          </div>
+            {copyright}
+          </p>
         {/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) {