From 2864813fc0ae6a2021a738c0747104d847b29de7 Mon Sep 17 00:00:00 2001
From: Florin Tudor <florin@ynput.io>
Date: Thu, 24 Oct 2024 08:55:25 +0200
Subject: [PATCH] fix(Settings): Removing extra scrollbars, limiting width for
 extra wide fields, adding missing padding - form right hand side

---
 .../AddonSettings/AddonSettings.jsx           | 23 ++++++++++++++-----
 .../SettingsEditor/SettingsEditor.sass        |  7 ++++--
 .../SettingsEditor/SettingsPanel.jsx          |  2 +-
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/containers/AddonSettings/AddonSettings.jsx b/src/containers/AddonSettings/AddonSettings.jsx
index afd6da800..89b1e232a 100644
--- a/src/containers/AddonSettings/AddonSettings.jsx
+++ b/src/containers/AddonSettings/AddonSettings.jsx
@@ -37,6 +37,13 @@ import { getValueByPath, setValueByPath, sameKeysStructure, compareObjects } fro
 import arrayEquals from '@helpers/arrayEquals'
 import { cloneDeep } from 'lodash'
 import { usePaste } from '@context/pasteContext'
+import styled from 'styled-components'
+
+const StyledScrollPanel = styled(ScrollPanel)`
+> div {
+  padding-right: 8px;
+}
+`
 
 /*
  * key is {addonName}|{addonVersion}|{variant}|{siteId}|{projectKey}
@@ -698,7 +705,11 @@ const AddonSettings = ({ projectName, showSites = false }) => {
         <Section className={showHelp && 'settings-help-visible'}>
           {settingsListHeader}
           <Section>
-            <ScrollPanel className="transparent nopad" style={{ flexGrow: 1 }} id="settings-scroll-panel">
+            <StyledScrollPanel
+              className="transparent nopad"
+              style={{ flexGrow: 1 }}
+              id="settings-scroll-panel"
+            >
               {selectedAddons
                 .filter((addon) => !addon.isBroken)
                 .reverse()
@@ -754,17 +765,17 @@ const AddonSettings = ({ projectName, showSites = false }) => {
                 })}
 
               <Spacer />
-            </ScrollPanel>
+            </StyledScrollPanel>
           </Section>
         </Section>
       </SplitterPanel>
       <SplitterPanel size={20}>
         <Section wrap style={{ minWidth: 300 }}>
           <Toolbar>{commitToolbar}</Toolbar>
-          <SettingsChangesTable 
-            changes={changedKeys} 
-            unpins={unpinnedKeys} 
-            onRevert={onRevertChange} 
+          <SettingsChangesTable
+            changes={changedKeys}
+            unpins={unpinnedKeys}
+            onRevert={onRevertChange}
           />
           {/*}
           <ScrollPanel className="transparent nopad" style={{ flexGrow: 1 }}>
diff --git a/src/containers/SettingsEditor/SettingsEditor.sass b/src/containers/SettingsEditor/SettingsEditor.sass
index 3c9e4e15c..7da108314 100644
--- a/src/containers/SettingsEditor/SettingsEditor.sass
+++ b/src/containers/SettingsEditor/SettingsEditor.sass
@@ -5,6 +5,8 @@ $field-gap: 8px
 
 .form-field
   flex-grow: 1
+  width: 100%
+  max-width: 600px
   // min-width: 150px
 
 .form-inline-field-help, .form-object-field-help
@@ -25,7 +27,7 @@ $field-gap: 8px
     font-size: .8rem
     white-space: pre
     overflow-wrap: normal
-    overflow-x: scroll
+    overflow-x: auto
 
   // If the 'enabled' switch is in a panel header hide its label
   .form-object-header-enabled-toggler
@@ -143,6 +145,7 @@ $field-gap: 8px
 
 
     .form-inline-field-widget
+      width: 100%
       flex-grow: 1
       display: flex
       flex-direction: column
@@ -169,4 +172,4 @@ $field-gap: 8px
     &.error
       .form-inline-field-label
         color: var(--color-hl-error, red)
-    
+    
\ No newline at end of file
diff --git a/src/containers/SettingsEditor/SettingsPanel.jsx b/src/containers/SettingsEditor/SettingsPanel.jsx
index 326e549d0..2ae911c85 100644
--- a/src/containers/SettingsEditor/SettingsPanel.jsx
+++ b/src/containers/SettingsEditor/SettingsPanel.jsx
@@ -64,7 +64,7 @@ const PanelHeader = styled.div`
 
 const PanelContent = styled.div`
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
   display: flex;
   flex-direction: column;
   border-left: 1px dotted #434a56;