Merge pull request #899 from ynput/894-settings-addon-settings-too-na…

…rrow-when-not-enough-content fix(Settings): Removed excessive scrollbars, other styling tweaks
ynput · Oct 24, 2024 · 263690c · 263690c
2 parents eb3fd4d + 2864813
commit 263690c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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)
-
+