From 2303c878010e93bb23467c9c4f69ac3b44d02aff Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Tue, 10 Feb 2026 11:22:13 +0100
Subject: [PATCH] Fix layout sizing with explicit height chain and complete
 Tailwind-to-CSS migration

Establish unbroken height: 100% chain from html/body through the layout
to ensure splitpanes and config tree fill available space. Migrate
remaining Tailwind classes to scoped CSS across all component files.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app.css                         |   2 +
 src/routes/+layout.svelte           |   3 +-
 src/routes/+page.svelte             |   3 +-
 src/routes/BrowserLayout.svelte     |   1 -
 src/routes/ConfigCardBrowser.svelte |   9 +-
 src/routes/ConfigCardDisplay.svelte |   5 +-
 src/routes/EditorLayout.svelte      | 315 ++++++++++++++--------------
 7 files changed, 172 insertions(+), 166 deletions(-)

diff --git a/src/app.css b/src/app.css
index 870bf72..c338483 100644
--- a/src/app.css
+++ b/src/app.css
@@ -20,6 +20,7 @@
 
 html,
 :host {
+  height: 100%;
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
@@ -39,6 +40,7 @@ html,
   */
 
 body {
+  height: 100%;
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
   color: var(--foreground);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 099d6af..f354c60 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -85,6 +85,7 @@
 
 <style>
   main {
+    height: 100%;
     font-size: var(--font-size);
     background-color: var(--background);
     color: var(--foreground);
@@ -94,7 +95,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    min-height: 100vh;
+    height: 100%;
     transition: all 0.2s;
   }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 83582e8..6a40aa5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,7 +61,6 @@
   section {
     flex: 1;
     min-height: 0;
-    display: flex;
-    flex-direction: column;
+    overflow: hidden;
   }
 </style>
diff --git a/src/routes/BrowserLayout.svelte b/src/routes/BrowserLayout.svelte
index 9e517c0..3a68cae 100644
--- a/src/routes/BrowserLayout.svelte
+++ b/src/routes/BrowserLayout.svelte
@@ -159,5 +159,4 @@
       grid-template-columns: repeat(3, 1fr);
     }
   }
-
 </style>
diff --git a/src/routes/ConfigCardBrowser.svelte b/src/routes/ConfigCardBrowser.svelte
index 420c41a..f24edf1 100644
--- a/src/routes/ConfigCardBrowser.svelte
+++ b/src/routes/ConfigCardBrowser.svelte
@@ -176,7 +176,8 @@
         bind:this={descriptionTextarea.element}
         class="description-input"
         class:editing={descriptionTextarea.doubleClicked}
-        class:disabled={(!data.isEditable || !isSelected) && display === 'editor'}
+        class:disabled={(!data.isEditable || !isSelected) &&
+          display === "editor"}
         readonly={!descriptionTextarea.doubleClicked || display !== "editor"}
         on:keydown={(e) => {
           if (e.key == "Enter" && !e.shiftKey) {
@@ -216,11 +217,13 @@
   <div class="card-footer">
     <div
       class="type-badge"
-      class:type-badge-active={data.selectedComponentTypes?.includes(data.type) ?? false}
+      class:type-badge-active={data.selectedComponentTypes?.includes(
+        data.type,
+      ) ?? false}
     >
       {data.type}
     </div>
-    <div class="footer-right" class:footer-right-editor={display === 'editor'}>
+    <div class="footer-right" class:footer-right-editor={display === "editor"}>
       <span class="owner-name">{configOwner}</span>
       {#if display == "editor"}
         <div class="visibility-container">
diff --git a/src/routes/ConfigCardDisplay.svelte b/src/routes/ConfigCardDisplay.svelte
index 11ccbfe..3419f8f 100644
--- a/src/routes/ConfigCardDisplay.svelte
+++ b/src/routes/ConfigCardDisplay.svelte
@@ -179,10 +179,7 @@
         />
       </BlockRow>
     </BlockColumn>
-    <div
-      style="color: var(--foreground-muted)"
-      class="description-container"
-    >
+    <div style="color: var(--foreground-muted)" class="description-container">
       <ConfigDescription
         value={data.description}
         disabled={!data.isEditable}
diff --git a/src/routes/EditorLayout.svelte b/src/routes/EditorLayout.svelte
index c1df227..eee4102 100644
--- a/src/routes/EditorLayout.svelte
+++ b/src/routes/EditorLayout.svelte
@@ -503,176 +503,177 @@
     </BlockColumn>
   {/if}
 
-  <Splitpanes
-    horizontal={true}
-    theme="modern-theme"
-    pushOtherPanes={false}
-    style="display: flex; flex: 1; min-height: 0; width: 100%;"
-  >
-    <Pane size={60}>
-      <div class="tree-pane">
-        <ConfigTree {configs} />
-      </div></Pane
-    >
-    <Pane size={40}>
-      <div class="detail-pane">
-        <ConfigCardDisplay
-          on:delete-config={handleDeleteConfig}
-          on:description-change={handleDescriptionChange}
-          on:name-change={handleNameChange}
-          on:path-change={handlePathChange}
-          on:overwrite-profile={handleOverwriteProfile}
-          data={$selected_config}
-        >
-          <svelte:fragment slot="link-button">
-            {@const config = $selected_config}
-            {#if config?.syncStatus != "local"}
-              <button
-                class="icon-button"
-                on:click|stopPropagation={() => {
-                  handleLink();
-                }}
-                use:tooltip={{
-                  instant: true,
-                  text: "Link",
-                }}
-              >
-                <SvgIcon iconPath="link" fill="var(--foreground-muted)" />
-                {#if linkFlag == config?.id}
-                  <div
-                    transition:fade|global={{
-                      duration: 100,
-                    }}
-                    class="popup"
-                  >
-                    Copied to clipboard!
-                  </div>
-                {/if}
-              </button>
-            {/if}
-          </svelte:fragment>
-          <svelte:fragment slot="sync-config-button">
-            {@const config = configs.find((e) => e.id === $selected_config?.id)}
-            {#if config?.syncStatus != "synced" || !config?.isEditable}
-              <button
-                on:click|stopPropagation={async () => {
-                  if (typeof config === "undefined") {
-                    return;
-                  }
-
-                  if (
-                    config.isEditable &&
-                    config.syncStatus === "local" &&
-                    !$userAccountService.account
-                  ) {
-                    loginToProfileCloud();
-                    return;
-                  }
-                  let configToSave = config;
-                  if (!configToSave.isEditable) {
-                    configToSave = {
-                      ...configToSave,
-                      name: `Copy of ${configToSave.name}`,
-                      owner: undefined,
-                      id: "",
-                    };
-                  }
-                  const cm = get(config_manager);
-                  cm?.saveConfig(configToSave, true);
-                  provideSelectedConfigForEditor(undefined);
-                  submitAnalytics({
-                    eventName: "Cloud Action",
-                    payload: {
-                      click: "Sync config",
-                    },
-                  });
-                }}
-                class="icon-button"
-                use:tooltip={{
-                  instant: true,
-                  text: !config?.isEditable
-                    ? "Import"
-                    : config.syncStatus === "cloud"
-                      ? "Download"
-                      : "Upload",
-                }}
-              >
-                <SvgIcon
-                  fill="var(--foreground-muted)"
-                  iconPath={!config?.isEditable
-                    ? "importIcon"
-                    : config.syncStatus === "cloud"
-                      ? "download"
-                      : "move_to_cloud_02"}
-                />
-              </button>
-            {/if}
-          </svelte:fragment>
-          <svelte:fragment slot="import-config-browser-button">
-            <DisplayOnWeb>
+  <div class="splitpanes-wrapper">
+    <Splitpanes horizontal={true} theme="modern-theme" pushOtherPanes={false}>
+      <Pane size={60}>
+        <div class="tree-pane">
+          <ConfigTree {configs} />
+        </div></Pane
+      >
+      <Pane size={40}>
+        <div class="detail-pane">
+          <ConfigCardDisplay
+            on:delete-config={handleDeleteConfig}
+            on:description-change={handleDescriptionChange}
+            on:name-change={handleNameChange}
+            on:path-change={handlePathChange}
+            on:overwrite-profile={handleOverwriteProfile}
+            data={$selected_config}
+          >
+            <svelte:fragment slot="link-button">
+              {@const config = $selected_config}
+              {#if config?.syncStatus != "local"}
+                <button
+                  class="icon-button"
+                  on:click|stopPropagation={() => {
+                    handleLink();
+                  }}
+                  use:tooltip={{
+                    instant: true,
+                    text: "Link",
+                  }}
+                >
+                  <SvgIcon iconPath="link" fill="var(--foreground-muted)" />
+                  {#if linkFlag == config?.id}
+                    <div
+                      transition:fade|global={{
+                        duration: 100,
+                      }}
+                      class="popup"
+                    >
+                      Copied to clipboard!
+                    </div>
+                  {/if}
+                </button>
+              {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="sync-config-button">
               {@const config = configs.find(
                 (e) => e.id === $selected_config?.id,
               )}
-              <button
-                on:click={() => {
-                  const configLinkUrl =
-                    `${configuration.DEEPLINK_PROTOCOL_NAME}://?config-link=` +
-                    config?.id;
-                  window.open(configLinkUrl, "_self");
-                }}
-                class="import-button"
-              >
-                Import {config?.id}
-              </button>
-            </DisplayOnWeb>
-          </svelte:fragment>
-
-          <span slot="toggle-accessibility">
-            {@const config = configs.find((e) => e.id === $selected_config?.id)}
-            <div
-              style="display: flex;
-    align-items: center;
-    gap: 0.25rem;"
-            >
-              {#if config?.public}
-                <div
+              {#if config?.syncStatus != "synced" || !config?.isEditable}
+                <button
+                  on:click|stopPropagation={async () => {
+                    if (typeof config === "undefined") {
+                      return;
+                    }
+
+                    if (
+                      config.isEditable &&
+                      config.syncStatus === "local" &&
+                      !$userAccountService.account
+                    ) {
+                      loginToProfileCloud();
+                      return;
+                    }
+                    let configToSave = config;
+                    if (!configToSave.isEditable) {
+                      configToSave = {
+                        ...configToSave,
+                        name: `Copy of ${configToSave.name}`,
+                        owner: undefined,
+                        id: "",
+                      };
+                    }
+                    const cm = get(config_manager);
+                    cm?.saveConfig(configToSave, true);
+                    provideSelectedConfigForEditor(undefined);
+                    submitAnalytics({
+                      eventName: "Cloud Action",
+                      payload: {
+                        click: "Sync config",
+                      },
+                    });
+                  }}
+                  class="icon-button"
                   use:tooltip={{
                     instant: true,
-                    text: "Public",
+                    text: !config?.isEditable
+                      ? "Import"
+                      : config.syncStatus === "cloud"
+                        ? "Download"
+                        : "Upload",
                   }}
                 >
                   <SvgIcon
                     fill="var(--foreground-muted)"
-                    iconPath={"publicIcon"}
+                    iconPath={!config?.isEditable
+                      ? "importIcon"
+                      : config.syncStatus === "cloud"
+                        ? "download"
+                        : "move_to_cloud_02"}
                   />
-                </div>
-              {:else}
+                </button>
+              {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="import-config-browser-button">
+              <DisplayOnWeb>
+                {@const config = configs.find(
+                  (e) => e.id === $selected_config?.id,
+                )}
+                <button
+                  on:click={() => {
+                    const configLinkUrl =
+                      `${configuration.DEEPLINK_PROTOCOL_NAME}://?config-link=` +
+                      config?.id;
+                    window.open(configLinkUrl, "_self");
+                  }}
+                  class="import-button"
+                >
+                  Import {config?.id}
+                </button>
+              </DisplayOnWeb>
+            </svelte:fragment>
+
+            <span slot="toggle-accessibility">
+              {@const config = configs.find(
+                (e) => e.id === $selected_config?.id,
+              )}
+              <div
+                style="display: flex;
+    align-items: center;
+    gap: 0.25rem;"
+              >
+                {#if config?.public}
+                  <div
+                    use:tooltip={{
+                      instant: true,
+                      text: "Public",
+                    }}
+                  >
+                    <SvgIcon
+                      fill="var(--foreground-muted)"
+                      iconPath={"publicIcon"}
+                    />
+                  </div>
+                {:else}
+                  <div
+                    use:tooltip={{
+                      instant: true,
+                      text: "Private",
+                    }}
+                  >
+                    <SvgIcon
+                      fill="var(--foreground-muted)"
+                      iconPath={"privateIcon"}
+                    />
+                  </div>
+                {/if}
                 <div
                   use:tooltip={{
                     instant: true,
-                    text: "Private",
+                    text: "Change visibility",
                   }}
                 >
-                  <SvgIcon
-                    fill="var(--foreground-muted)"
-                    iconPath={"privateIcon"}
-                  />
+                  <Toggle bind:value={publicToggleValue} />
                 </div>
-              {/if}
-              <div
-                use:tooltip={{
-                  instant: true,
-                  text: "Change visibility",
-                }}
-              >
-                <Toggle bind:value={publicToggleValue} />
               </div>
-            </div>
-          </span>
-        </ConfigCardDisplay>
-      </div>
-    </Pane>
-  </Splitpanes>
+            </span>
+          </ConfigCardDisplay>
+        </div>
+      </Pane>
+    </Splitpanes>
+  </div>
   <UserLogin {usernameInput} />
 </div>
 
@@ -680,8 +681,7 @@
   .main-layout {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    min-height: 0;
+    height: 100%;
     width: 100%;
     gap: 0.5rem;
     position: relative;
@@ -689,6 +689,11 @@
     overflow: hidden;
   }
 
+  .splitpanes-wrapper {
+    flex: 1;
+    min-height: 0;
+  }
+
   .tree-pane {
     display: flex;
     height: 100%;