style(FR-1736): responsive ui is needed for branding theme colors. (#4769)

Resolves #4727 ([FR-1736](https://lablup.atlassian.net/browse/FR-1736))

# Improve responsive design of ThemeColorPicker component

This PR enhances the responsive layout of the ThemeColorPicker component by:

- Adding responsive column sizing that adapts to different screen sizes
- Adding wrap capability to the color picker flex containers
- Setting minimum width for color pickers to prevent them from becoming too small
- Adjusting gutter spacing to provide better vertical spacing on smaller screens

These changes ensure the theme color picker displays properly across different device sizes, particularly on mobile and tablet screens.

![image.png](https://app.graphite.com/user-attachments/assets/da5e90c2-332b-47fe-8e0b-a33b1d05bd1d.png)

![image.png](https://app.graphite.com/user-attachments/assets/2e3acb71-c4f1-4c9d-b664-988ac0b10a0e.png)

![image.png](https://app.graphite.com/user-attachments/assets/3538b631-1dc0-4443-97a4-7c06004b4c72.png)

**Checklist:**

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1736]: https://lablup.atlassian.net/browse/FR-1736?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

react/src/components/BrandingSettingItems/ThemeColorPicker.tsx

@@ -45,9 +45,13 @@ const ThemeColorPicker: React.FC<ThemeColorPickerSettingItemProps> = ({
       direction="column"
       style={{ alignSelf: 'stretch' }}
     >
-      <Row gutter={16}>
-        <Col span={6}>
-          <BAIFlex gap="sm" style={{ color: token.colorTextTertiary }}>
+      <Row gutter={[16, 4]}>
+        <Col xl={6} lg={24}>
+          <BAIFlex
+            gap="sm"
+            style={{ color: token.colorTextTertiary }}
+            wrap="wrap"
+          >
             {t('userSettings.LightMode')}:
             <ColorPicker
               format="hex"
@@ -62,11 +66,16 @@ const ThemeColorPicker: React.FC<ThemeColorPickerSettingItemProps> = ({
                 _.set(newCustomThemeConfig, `light.${tokenName}`, newColor);
                 setUserCustomThemeConfig(newCustomThemeConfig);
               }}
+              style={{ minWidth: 110 }}
             />
           </BAIFlex>
         </Col>
-        <Col span={6}>
-          <BAIFlex gap="sm" style={{ color: token.colorTextTertiary }}>
+        <Col xl={6} lg={24}>
+          <BAIFlex
+            gap="sm"
+            style={{ color: token.colorTextTertiary }}
+            wrap="wrap"
+          >
             {t('userSettings.DarkMode')}:
             <ColorPicker
               format="hex"
@@ -81,6 +90,7 @@ const ThemeColorPicker: React.FC<ThemeColorPickerSettingItemProps> = ({
                 _.set(newCustomThemeConfig, `dark.${tokenName}`, newColor);
                 setUserCustomThemeConfig(newCustomThemeConfig);
               }}
+              style={{ minWidth: 110 }}
             />
           </BAIFlex>
         </Col>