Merge pull request #918 from ynput/917-project-anatomy-anatomy-roots-…

…fields-too-narow fix(Settings): Aligning form fields in settings pages
ynput · Nov 13, 2024 · 91f2a9c · 91f2a9c
2 parents 3c6590d + 4410a10
commit 91f2a9c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/containers/SettingsEditor/FormTemplates/ObjectFieldTemplate.tsx b/src/containers/SettingsEditor/FormTemplates/ObjectFieldTemplate.tsx
@@ -104,7 +104,7 @@ function ObjectFieldTemplate(props: { id: string } & ObjectFieldTemplateProps) {
         else otherFields.push(element.content)
       }
       return (
-        <div className="foo">
+        <div style={{width: '100%'}}>
           {longDescription}
           <div className={className}>
             <div className="name-field">{nameField}</div>

diff --git a/src/containers/SettingsEditor/SettingsEditor.sass b/src/containers/SettingsEditor/SettingsEditor.sass
@@ -6,8 +6,6 @@ $field-gap: 8px
 .form-field
   flex-grow: 1
   width: 100%
-  max-width: 600px
-  // min-width: 150px
 
 .form-inline-field-help, .form-object-field-help
   display: none
@@ -109,7 +107,6 @@ $field-gap: 8px
 
   .form-object-field-item
     display: contents
-    outline: solid 1px yellow
     div[data-hidden="true"]
       position: absolute
       visibility: hidden
@@ -120,7 +117,6 @@ $field-gap: 8px
         height: 0
         padding-top: 0
         padding-bottom: 0
-        outline: solid 1px red
     &:has(div[data-hidden="false"])
       position: relative
       visibility: visible

diff --git a/src/containers/SettingsEditor/Widgets/DateTimeWidget.tsx b/src/containers/SettingsEditor/Widgets/DateTimeWidget.tsx
@@ -40,7 +40,7 @@ const DateTimeWidget = (props: $Any) => {
   }
 
   // @ts-ignore
-  return <InputDate selected={value || undefined} onChange={onChange} onFocus={onFocus} />
+  return <InputDate className="form-field" selected={value || undefined} onChange={onChange} onFocus={onFocus} />
 }
 
 export { DateTimeWidget }
diff --git a/src/containers/SettingsEditor/Widgets/SelectWidget.tsx b/src/containers/SettingsEditor/Widgets/SelectWidget.tsx
@@ -3,6 +3,13 @@ import { Dropdown } from '@ynput/ayon-react-components'
 
 import { updateChangedKeys, equiv, parseContext } from '../helpers'
 import { $Any } from '@types'
+import styled from 'styled-components'
+
+const StyledDropdown = styled(Dropdown)`
+  button > div > div:has(span) {
+      width: 0;
+  }
+`
 
 const SelectWidget = (props: $Any) => {
   const { originalValue, path } = parseContext(props)
@@ -89,7 +96,7 @@ const SelectWidget = (props: $Any) => {
   }
 
   return (
-    <Dropdown
+    <StyledDropdown
       widthExpand
       options={options}
       value={renderableValue}