fix: stabilize account tab dimensions

Keep Account Overview and Usage Rules inside the same fixed grid row. Move rules scrolling into a dedicated inner panel so switching tabs no longer changes the outer sizing and overflow model. Add a regression test for the shared layout contract.

src/renderer/App.tsx

@@ -5692,7 +5692,7 @@ export function App(): ReactElement {
                   </div>
                 )}
                 {settingsSubTab === "accounts" && (
-                  <div className={`account-settings-layout ${accountManagementTab}`}>
+                  <div className="account-settings-layout">
                     <div className="account-management-heading">
                       <div>
                         <h3>Accountverwaltung</h3>
@@ -5735,7 +5735,8 @@ export function App(): ReactElement {
                       </div>
                     </div>
 
-                    <div className="settings-section card account-rule-section" hidden={accountManagementTab !== "rules"}>
+                    <div className="account-rules-panel" hidden={accountManagementTab !== "rules"}>
+                    <div className="settings-section card account-rule-section">
                       <div className="account-board-header">
                         <div>
                           <h3>Rotations-Verlauf</h3>
@@ -5760,7 +5761,7 @@ export function App(): ReactElement {
                       </div>
                     </div>
 
-                    <div className="settings-section card account-rule-section" hidden={accountManagementTab !== "rules"}>
+                    <div className="settings-section card account-rule-section">
                       <h3>Hoster-Reihenfolge</h3>
                       <div className="hint">
                         Lege fest, in welcher Reihenfolge die Debrid-Accounts für Links genutzt werden.
@@ -5817,7 +5818,7 @@ export function App(): ReactElement {
                     </div>
 
                     {configuredProviders.length >= 1 && (
-                    <div className="settings-section card account-rule-section" hidden={accountManagementTab !== "rules"}>
+                    <div className="settings-section card account-rule-section">
                       <h3>Hoster-Zuordnung</h3>
                       <div className="hint">Lege fest, welcher Debrid-Provider sich um welchen Filehoster kümmert. Nicht zugeordnete Hoster nutzen die Standard-Reihenfolge oben.</div>
                       {(() => {
@@ -5903,10 +5904,11 @@ export function App(): ReactElement {
                           </>
                         );
                       })()}
-                    </div>
-                    )}
-
-                    <div hidden>
+                    </div>
+                    )}
+                    </div>
+
+                    <div hidden>
                   <div className="settings-section card">
                     <h3>Accounts</h3>
                     <label>Real-Debrid API Token</label>

src/renderer/styles.css

@@ -1254,14 +1254,6 @@ body,
   background: color-mix(in srgb, var(--surface) 96%, transparent);
 }
 
-.account-settings-layout.rules {
-  grid-template-rows: auto auto;
-  align-content: start;
-  gap: 8px;
-  overflow-y: auto;
-  padding-bottom: 8px;
-}
-
 .account-management-heading {
   display: flex;
   align-items: center;
@@ -1327,12 +1319,26 @@ body,
 }
 
 .account-overview-panel[hidden],
-.account-rule-section[hidden] {
+.account-rules-panel[hidden] {
   display: none;
 }
 
+.account-rules-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 8px;
+}
+
 .account-rule-section {
-  margin: 0 8px;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  flex: 0 0 auto;
 }
 
 .account-board {