Enhance ThemeSettings and UI components by adding maxWidth styling for better responsiveness. This change ensures that buttons and columns adapt to the full width of their containers.

packages/desktop-client/src/components/settings/Themes.tsx

@@ -229,6 +229,7 @@ export function ThemeSettings() {
                     '&[data-hovered]': {
                       backgroundColor: themeStyle.buttonNormalBackgroundHover,
                     },
+                    maxWidth: '100%',
                   })}
                 />
               </Column>
@@ -248,6 +249,7 @@ export function ThemeSettings() {
                           backgroundColor:
                             themeStyle.buttonNormalBackgroundHover,
                         },
+                        maxWidth: '100%',
                       })}
                     />
                   </Column>
@@ -265,6 +267,7 @@ export function ThemeSettings() {
                           backgroundColor:
                             themeStyle.buttonNormalBackgroundHover,
                         },
+                        maxWidth: '100%',
                       })}
                     />
                   </Column>

packages/desktop-client/src/components/settings/UI.tsx

@@ -118,7 +118,9 @@ export function Column({
       }}
     >
       <Text style={{ fontWeight: 500 }}>{title}</Text>
-      <View style={{ alignItems: 'flex-start', gap: '1em' }}>{children}</View>
+      <View style={{ alignItems: 'flex-start', gap: '1em', width: '100%' }}>
+        {children}
+      </View>
     </View>
   );
 }