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

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>
   );
 }