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.

README.md

@@ -10,6 +10,11 @@ Desktop downloader for Windows with package-based queue management, multi-provid
 
 ## Changelog
 
+### 2.0.11
+
+- Keep Account Overview and Usage Rules inside the same fixed layout frame.
+- Prevent sizing and scroll-mode changes when switching between the account tabs.
+
 ### 2.0.10
 
 - Add locally bundled provider logos throughout account management.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "real-debrid-downloader",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "real-debrid-downloader",
-      "version": "2.0.10",
+      "version": "2.0.11",
       "license": "MIT",
       "dependencies": {
         "adm-zip": "0.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "real-debrid-downloader",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Desktop downloader",
   "main": "build/main/main/main.js",
   "author": "Sucukdeluxe",

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 {

tests/account-layout.test.ts

@@ -0,0 +1,15 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const appSource = readFileSync(new URL("../src/renderer/App.tsx", import.meta.url), "utf8");
+const styles = readFileSync(new URL("../src/renderer/styles.css", import.meta.url), "utf8");
+
+describe("account management layout", () => {
+  it("keeps both account tabs inside the same fixed content row", () => {
+    expect(appSource).toContain('<div className="account-settings-layout">');
+    expect(appSource).not.toContain("account-settings-layout ${accountManagementTab}");
+    expect(appSource).toContain('<div className="account-rules-panel" hidden={accountManagementTab !== "rules"}>');
+    expect(styles).not.toMatch(/\.account-settings-layout\.rules\s*{/);
+    expect(styles).toMatch(/\.account-rules-panel\s*{[^}]*min-width:\s*0;[^}]*min-height:\s*0;[^}]*overflow-y:\s*auto;/s);
+  });
+});