From 92b513dd9d0df371f40ca7d60bceb5b858e7f790 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Mon, 9 Mar 2026 17:27:09 +0100
Subject: [PATCH] feat(settings): add project max aspect ratio setting with CSS
 constraint

---
 v2/src/App.svelte                             |  4 ++
 .../components/Workspace/ProjectGrid.svelte   |  1 +
 .../components/Workspace/SettingsTab.svelte   | 45 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/v2/src/App.svelte b/v2/src/App.svelte
index 6d9ecf6..3984613 100644
--- a/v2/src/App.svelte
+++ b/v2/src/App.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { initTheme } from './lib/stores/theme.svelte';
+  import { getSetting } from './lib/adapters/settings-bridge';
   import { isDetachedMode, getDetachedConfig } from './lib/utils/detach';
   import { startAgentDispatcher, stopAgentDispatcher } from './lib/agent-dispatcher';
   import { loadWorkspace, getActiveTab, setActiveTab, setActiveProject, getEnabledProjects } from './lib/stores/workspace.svelte';
@@ -60,6 +61,9 @@
 
   onMount(() => {
     initTheme();
+    getSetting('project_max_aspect').then(v => {
+      if (v) document.documentElement.style.setProperty('--project-max-aspect', v);
+    });
     startAgentDispatcher();
 
     if (!detached) {
diff --git a/v2/src/lib/components/Workspace/ProjectGrid.svelte b/v2/src/lib/components/Workspace/ProjectGrid.svelte
index 02dc5f3..0026903 100644
--- a/v2/src/lib/components/Workspace/ProjectGrid.svelte
+++ b/v2/src/lib/components/Workspace/ProjectGrid.svelte
@@ -67,6 +67,7 @@
   .project-slot {
     flex: 0 0 calc((100% - (var(--visible-count) - 1) * 0.25rem) / var(--visible-count));
     min-width: 30rem;
+    max-width: calc(100vh * var(--project-max-aspect, 1));
     display: flex;
   }
 
diff --git a/v2/src/lib/components/Workspace/SettingsTab.svelte b/v2/src/lib/components/Workspace/SettingsTab.svelte
index 2ebe569..6210caf 100644
--- a/v2/src/lib/components/Workspace/SettingsTab.svelte
+++ b/v2/src/lib/components/Workspace/SettingsTab.svelte
@@ -44,6 +44,7 @@
   let uiFontSize = $state('');
   let termFont = $state('');
   let termFontSize = $state('');
+  let projectMaxAspect = $state('1.0');
   let selectedTheme = $state<ThemeId>(getCurrentTheme());
 
   // Dropdown open states
@@ -103,13 +104,14 @@
   );
 
   onMount(async () => {
-    const [shell, cwd, font, size, tfont, tsize] = await Promise.all([
+    const [shell, cwd, font, size, tfont, tsize, aspect] = await Promise.all([
       getSetting('default_shell'),
       getSetting('default_cwd'),
       getSetting('ui_font_family'),
       getSetting('ui_font_size'),
       getSetting('term_font_family'),
       getSetting('term_font_size'),
+      getSetting('project_max_aspect'),
     ]);
     defaultShell = shell ?? '';
     defaultCwd = cwd ?? '';
@@ -117,6 +119,8 @@
     uiFontSize = size ?? '';
     termFont = tfont ?? '';
     termFontSize = tsize ?? '';
+    projectMaxAspect = aspect ?? '1.0';
+    applyAspectRatio(projectMaxAspect);
     selectedTheme = getCurrentTheme();
 
     try {
@@ -174,6 +178,20 @@
     await saveGlobalSetting('term_font_size', size);
   }
 
+  function applyAspectRatio(value: string) {
+    const num = parseFloat(value);
+    if (isNaN(num) || num <= 0) return;
+    document.documentElement.style.setProperty('--project-max-aspect', value);
+  }
+
+  async function handleAspectChange(value: string) {
+    const num = parseFloat(value);
+    if (isNaN(num) || num < 0.3 || num > 3.0) return;
+    projectMaxAspect = value;
+    applyAspectRatio(value);
+    await saveGlobalSetting('project_max_aspect', value);
+  }
+
   async function handleThemeChange(themeId: ThemeId) {
     selectedTheme = themeId;
     themeDropdownOpen = false;
@@ -407,6 +425,31 @@
           </div>
         </div>
       </div>
+      <div class="setting-field">
+        <span class="setting-label">Project max aspect ratio</span>
+        <div class="size-control">
+          <button
+            class="size-btn"
+            onclick={() => handleAspectChange((Math.max(0.3, parseFloat(projectMaxAspect) - 0.1)).toFixed(1))}
+            disabled={parseFloat(projectMaxAspect) <= 0.3}
+          >&minus;</button>
+          <input
+            type="number"
+            min="0.3"
+            max="3.0"
+            step="0.1"
+            value={projectMaxAspect}
+            class="size-input"
+            onchange={e => handleAspectChange((e.target as HTMLInputElement).value)}
+          />
+          <span class="size-unit">w:h</span>
+          <button
+            class="size-btn"
+            onclick={() => handleAspectChange((Math.min(3.0, parseFloat(projectMaxAspect) + 0.1)).toFixed(1))}
+            disabled={parseFloat(projectMaxAspect) >= 3.0}
+          >+</button>
+        </div>
+      </div>
     </div>
   </section>