From e379dc6b2a91be5aaa5f06f44271c2ff672a3a0c Mon Sep 17 00:00:00 2001
From: echobt <mathis.massimino+echo@cortex.foundation>
Date: Fri, 27 Feb 2026 17:37:08 +0000
Subject: [PATCH 1/2] fix: prevent JSON Settings Editor header actions from
 clipping on resize (fixes PlatformNetwork/bounty-challenge#21915)

---
 src/components/settings/JsonSettingsEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/JsonSettingsEditor.tsx b/src/components/settings/JsonSettingsEditor.tsx
index a647619..26c5486 100644
--- a/src/components/settings/JsonSettingsEditor.tsx
+++ b/src/components/settings/JsonSettingsEditor.tsx
@@ -1221,7 +1221,7 @@ export function JsonSettingsEditor(props: JsonSettingsEditorProps) {
       {/* Header */}
       <div class="flex items-center justify-between px-4 py-2 border-b border-border bg-background-secondary flex-wrap gap-2">
         {/* Scope Tabs */}
-        <div class="flex items-center gap-2 flex-wrap">
+        <div class="flex items-center gap-2 flex-wrap min-w-0">
           <div class="flex items-center gap-1 rounded-lg border border-border bg-background p-0.5">
             <button
               onClick={() => switchScope("user")}
@@ -1263,7 +1263,7 @@ export function JsonSettingsEditor(props: JsonSettingsEditorProps) {
         </div>
 
         {/* Actions */}
-        <div class="flex items-center gap-2 flex-wrap">
+        <div class="flex items-center gap-2 flex-wrap flex-shrink-0">
           {/* Show Default Settings Toggle */}
           <button
             onClick={() => setShowDefaultSettings(!showDefaultSettings())}

From c16454f4dae620c4afa39662d43eb926a8a55a61 Mon Sep 17 00:00:00 2001
From: echobt <mathis.massimino+echo@cortex.foundation>
Date: Fri, 27 Feb 2026 17:37:06 +0000
Subject: [PATCH 2/2] fix: prevent JSON Settings Editor header actions from
 clipping on resize (fixes PlatformNetwork/bounty-challenge#21915)

Add flex layout fixes to the JSON Settings Editor header bar so action
buttons (Show Defaults, Reload, Save) remain visible when the window
is resized narrower:

- Add min-w-0 to the left container (scope tabs + file path) so it can
  shrink below its content size, allowing truncation to work properly
- Add min-w-0 to the file path indicator for proper text truncation
  within the flex parent
- Add flex-shrink-0 to the actions container so buttons never collapse

The existing flex-wrap and gap on the header handle graceful reflow when
space is truly constrained.
---
 src/components/settings/JsonSettingsEditor.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/JsonSettingsEditor.tsx b/src/components/settings/JsonSettingsEditor.tsx
index 26c5486..efdaf51 100644
--- a/src/components/settings/JsonSettingsEditor.tsx
+++ b/src/components/settings/JsonSettingsEditor.tsx
@@ -1256,14 +1256,14 @@ export function JsonSettingsEditor(props: JsonSettingsEditorProps) {
           
           {/* File path indicator */}
           <Show when={settingsPath()}>
-            <span class="text-xs text-foreground-muted truncate max-w-[300px]" title={settingsPath()}>
+            <span class="text-xs text-foreground-muted truncate max-w-[300px] min-w-0" title={settingsPath()}>
               {settingsPath()}
             </span>
           </Show>
         </div>
 
         {/* Actions */}
-        <div class="flex items-center gap-2 flex-wrap flex-shrink-0">
+        <div class="flex items-center gap-2 flex-shrink-0 flex-wrap">
           {/* Show Default Settings Toggle */}
           <button
             onClick={() => setShowDefaultSettings(!showDefaultSettings())}