hella cleanup - index page items; use more Row/Cols to reduce custom css layout

web/components/config/README.md

@@ -42,3 +42,5 @@ There are also a variety of other local states to manage the display of error/su
 
 
 
+segment-slider-container
+selected-value-note

web/components/config/edit-social-links.tsx

@@ -221,6 +221,19 @@ export default function EditSocialLinks() {
     disabled: !isValidUrl(modalDataState.url),
   };
 
+  const otherField = (
+    <div className="other-field-container formfield-container">
+      <div className="label-side" />
+      <div className="input-side">
+        <Input
+          placeholder="Other platform name"
+          defaultValue={modalDataState.platform}
+          onChange={handleOtherNameChange}
+        />
+      </div>
+    </div>
+  );
+
   return (
     <div className="social-links-edit-container">
       <Title level={3} className="section-title">
@@ -249,30 +262,23 @@ export default function EditSocialLinks() {
         confirmLoading={modalProcessing}
         okButtonProps={okButtonProps}
       >
-        <SocialDropdown
-          iconList={availableIconsList}
-          selectedOption={selectedOther ? OTHER_SOCIAL_HANDLE_OPTION : modalDataState.platform}
-          onSelected={handleDropdownSelect}
-        />
-        {displayOther ? (
-          <>
-            <Input
-              placeholder="Other"
-              defaultValue={modalDataState.platform}
-              onChange={handleOtherNameChange}
-            />
-            <br />
-          </>
-        ) : null}
-        <br />
-        <TextField
-          fieldName="social-url"
-          label="URL"
-          placeholder={PLACEHOLDERS[modalDataState.platform] || 'Url to page'}
-          value={modalDataState.url}
-          onChange={handleUrlChange}
-        />
-        <FormStatusIndicator status={submitStatus} />
+        <div className="social-handle-modal-content">
+          <SocialDropdown
+            iconList={availableIconsList}
+            selectedOption={selectedOther ? OTHER_SOCIAL_HANDLE_OPTION : modalDataState.platform}
+            onSelected={handleDropdownSelect}
+          />
+          {displayOther && otherField}
+          <br />
+          <TextField
+            fieldName="social-url"
+            label="URL"
+            placeholder={PLACEHOLDERS[modalDataState.platform] || 'Url to page'}
+            value={modalDataState.url}
+            onChange={handleUrlChange}
+          />
+          <FormStatusIndicator status={submitStatus} />
+        </div>
       </Modal>
       <br />
       <Button

web/components/config/social-icons-dropdown.tsx

@@ -23,39 +23,41 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
         If you are looking for a platform name not on this list, please select Other and type in
         your own name. A logo will not be provided.
       </p>
-      <p className="description">
-        If you DO have a logo, drop it in to the <code>/webroot/img/platformicons</code> directory
-        and update the <code>/socialHandle.go</code> list. Then restart the server and it will show
-        up in the list.
-      </p>
 
-      <Select
-        style={{ width: 240 }}
-        className="social-dropdown"
-        placeholder="Social platform..."
-        defaultValue={inititalSelected}
-        value={inititalSelected}
-        onSelect={handleSelected}
-      >
-        {iconList.map(item => {
-          const { platform, icon, key } = item;
-          return (
-            <Select.Option className="social-option" key={`platform-${key}`} value={key}>
-              <span className="option-icon">
-                <img src={`${NEXT_PUBLIC_API_HOST}${icon}`} alt="" className="option-icon" />
-              </span>
-              <span className="option-label">{platform}</span>
+      <div className="formfield-container">
+        <div className="label-side">
+          <span className="formfield-label">Social Platform</span>
+        </div>
+        <div className="input-side">
+          <Select
+            style={{ width: 240 }}
+            className="social-dropdown"
+            placeholder="Social platform..."
+            defaultValue={inititalSelected}
+            value={inititalSelected}
+            onSelect={handleSelected}
+          >
+            {iconList.map(item => {
+              const { platform, icon, key } = item;
+              return (
+                <Select.Option className="social-option" key={`platform-${key}`} value={key}>
+                  <span className="option-icon">
+                    <img src={`${NEXT_PUBLIC_API_HOST}${icon}`} alt="" className="option-icon" />
+                  </span>
+                  <span className="option-label">{platform}</span>
+                </Select.Option>
+              );
+            })}
+            <Select.Option
+              className="social-option"
+              key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`}
+              value={OTHER_SOCIAL_HANDLE_OPTION}
+            >
+              Other...
             </Select.Option>
-          );
-        })}
-        <Select.Option
-          className="social-option"
-          key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`}
-          value={OTHER_SOCIAL_HANDLE_OPTION}
-        >
-          Other...
-        </Select.Option>
-      </Select>
+          </Select>
+        </div>
+      </div>
     </div>
   );
 }

web/components/config/video-variant-form.tsx

@@ -156,7 +156,7 @@ export default function VideoVariantForm({
       </p>
 
       <Row gutter={16}>
-        <Col xs={12} xl={12}>
+        <Col sm={24} md={12}>
           {/* ENCODER PRESET FIELD */}
           <div className="form-module cpu-usage-container">
             <CPUUsageSelector
@@ -177,7 +177,7 @@ export default function VideoVariantForm({
           </div>
         </Col>
 
-        <Col xs={12} xl={12}>
+        <Col sm={24} md={12}>
           {/* VIDEO BITRATE FIELD */}
           <div
             className={`form-module bitrate-container ${