From ab7e123c960b68f4791bace5db3dea202620c214 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 18:19:53 -0500
Subject: [PATCH] SoapboxConfig: expand input widths

---
 .../features/soapbox_config/components/footer-link-input.tsx    | 2 ++
 .../features/soapbox_config/components/promo-panel-input.tsx    | 2 ++
 app/soapbox/features/soapbox_config/index.tsx                   | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
index ac4accc19..bf2451240 100644
--- a/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/footer-link-input.tsx
@@ -24,12 +24,14 @@ const PromoPanelInput: StreamfieldComponent<FooterItem> = ({ value, onChange })
     <HStack space={2} grow>
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.title}
         onChange={handleChange('title')}
       />
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
index 3bda1f1d8..616fddb82 100644
--- a/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox_config/components/promo-panel-input.tsx
@@ -36,12 +36,14 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
 
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.text}
         onChange={handleChange('text')}
       />
       <Input
         type='text'
+        outerClassName='w-full flex-grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 25e28ce5d..9eb5ed28f 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -194,12 +194,14 @@ const SoapboxConfig: React.FC = () => {
                 value={soapbox.brandColor}
                 onChange={handleColorChange(['brandColor'], (color) => color.hex)}
               />
+
               <ColorWithPicker
                 buttonId='accent_color'
                 label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
                 value={soapbox.accentColor}
                 onChange={handleColorChange(['accentColor'], (color) => color.hex)}
               />
+
               <div className='input with_label toggle'>
                 <div className='label_input'>
                   <label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>