Fixed Settings UI

frontend/src/App.tsx

@@ -3351,7 +3351,8 @@ function App() {
 
         {activePage === 'settings' ? (
           <section className="forms-grid settings-grid">
-          <article className="panel form-panel">
+          <div className="settings-column settings-column-left">
+          <article className="panel form-panel settings-card-flock-profile">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Flock</p>
@@ -3414,7 +3415,7 @@ function App() {
             </form>
           </article>
 
-          <article className="panel form-panel">
+          <article className="panel form-panel settings-card-billing">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Billing</p>
@@ -3546,7 +3547,9 @@ function App() {
             </div>
           </article>
 
-          <article className="panel form-panel">
+          </div>
+          <div className="settings-column settings-column-right">
+          <article className="panel form-panel settings-card-collaborators">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Collaborators</p>
@@ -3639,7 +3642,7 @@ function App() {
             ) : null}
           </article>
 
-          <article className="panel form-panel">
+          <article className="panel form-panel settings-card-automation">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Automation</p>
@@ -3742,7 +3745,7 @@ function App() {
             ) : null}
           </article>
 
-          <article className="panel form-panel">
+          <article className="panel form-panel settings-card-separate-flock">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Separate flock</p>
@@ -3853,7 +3856,7 @@ function App() {
             ) : null}
           </article>
 
-          <article className="panel form-panel">
+          <article className="panel form-panel settings-card-bird-profiles">
             <div className="panel-header">
               <div>
                 <p className="eyebrow">Bird profiles</p>
@@ -4117,10 +4120,10 @@ function App() {
             ) : null}
           </article>
 
-          <article className="panel form-panel">
+          <article className="panel form-panel settings-card-transfer">
             <div className="panel-header">
               <div>
-                <p className="eyebrow">Settings</p>
+                <p className="eyebrow">Transfer</p>
                 <h2>Bird transfer</h2>
               </div>
               <button
@@ -4193,6 +4196,7 @@ function App() {
               </>
             ) : null}
           </article>
+          </div>
           </section>
         ) : null}
       </section>

frontend/src/index.css

@@ -436,18 +436,53 @@ textarea {
 }
 
 .settings-grid {
-  display: block;
-  column-count: 2;
-  column-gap: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+  align-items: start;
 }
 
-.settings-grid > .panel {
-  display: inline-grid;
+.settings-column {
+  display: grid;
+  gap: 1.5rem;
+  align-content: start;
+}
+
+.settings-column > .panel {
+  display: grid;
   width: 100%;
-  margin: 0 0 1.5rem;
+  margin: 0;
   break-inside: avoid;
 }
 
+.settings-card-bird-profiles {
+  order: 1;
+}
+
+.settings-card-collaborators {
+  order: 2;
+}
+
+.settings-card-separate-flock {
+  order: 3;
+}
+
+.settings-card-automation {
+  order: 4;
+}
+
+.settings-card-transfer {
+  order: 5;
+}
+
+.settings-card-flock-profile {
+  order: 1;
+}
+
+.settings-card-billing {
+  order: 2;
+}
+
 .flock-member-panel,
 .flock-member-sections {
   display: grid;
@@ -1303,7 +1338,12 @@ label {
   }
 
   .settings-grid {
-    column-count: 1;
+    grid-template-columns: 1fr;
+  }
+
+  .settings-column,
+  .settings-column > .panel {
+    grid-column: auto;
   }
 
   .side-nav {