From cd7a9896dc5d890207d5f003adcdcacd335168c1 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Mon, 20 Nov 2023 20:16:55 +0800
Subject: [PATCH] improve styles

---
 frontend/src/components/ConfigSelector.tsx           |  2 +-
 frontend/src/pages/Completion.tsx                    |  4 +++-
 frontend/src/pages/Composition.tsx                   |  4 +++-
 frontend/src/pages/PresetsManager/MessagesEditor.tsx |  3 ++-
 frontend/src/pages/Settings.tsx                      | 10 +++++-----
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ConfigSelector.tsx b/frontend/src/components/ConfigSelector.tsx
index 59f905f..ae7ebf6 100644
--- a/frontend/src/components/ConfigSelector.tsx
+++ b/frontend/src/components/ConfigSelector.tsx
@@ -4,7 +4,7 @@ import { Dropdown, Option } from '@fluentui/react-components';
 import commonStore from '../stores/commonStore';
 
 export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => {
-  return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
+  return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
     value={commonStore.getCurrentModelConfig().name}
     selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
     onOptionSelect={(_, data) => {
diff --git a/frontend/src/pages/Completion.tsx b/frontend/src/pages/Completion.tsx
index 0a344b8..9b5c90c 100644
--- a/frontend/src/pages/Completion.tsx
+++ b/frontend/src/pages/Completion.tsx
@@ -29,8 +29,10 @@ const CompletionPanel: FC = observer(() => {
   };
 
   useEffect(() => {
-    if (inputRef.current)
+    if (inputRef.current) {
       inputRef.current.style.height = '100%';
+      inputRef.current.style.maxHeight = '100%';
+    }
     scrollToBottom();
   }, []);
 
diff --git a/frontend/src/pages/Composition.tsx b/frontend/src/pages/Composition.tsx
index cb1937c..2a916a4 100644
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -82,8 +82,10 @@ const CompositionPanel: FC = observer(() => {
   };
 
   useEffect(() => {
-    if (inputRef.current)
+    if (inputRef.current) {
       inputRef.current.style.height = '100%';
+      inputRef.current.style.maxHeight = '100%';
+    }
     scrollToBottom();
 
     if (playerRef.current && visualizerRef.current) {
diff --git a/frontend/src/pages/PresetsManager/MessagesEditor.tsx b/frontend/src/pages/PresetsManager/MessagesEditor.tsx
index 130d00a..779b9f4 100644
--- a/frontend/src/pages/PresetsManager/MessagesEditor.tsx
+++ b/frontend/src/pages/PresetsManager/MessagesEditor.tsx
@@ -108,7 +108,8 @@ const MessagesEditor: FC = observer(() => {
                             style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
                             <ReOrderDotsVertical20Regular />
                           </Card>
-                          <Dropdown style={{ minWidth: 0, borderRadius: 0 }} listbox={{ style: { minWidth: 0 } }}
+                          <Dropdown style={{ minWidth: 0, borderRadius: 0 }}
+                            listbox={{ style: { minWidth: 'fit-content' } }}
                             value={t(item.role)!}
                             selectedOptions={[item.role]}
                             onOptionSelect={(_, data) => {
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index f46aaea..db3c982 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -23,7 +23,7 @@ export const GeneralSettings: FC = observer(() => {
 
   return <div className="flex flex-col gap-2">
     <Labeled label={t('Language')} flex spaceBetween content={
-      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
+      <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
         value={Languages[commonStore.settings.language]}
         selectedOptions={[commonStore.settings.language]}
         onOptionSelect={(_, data) => {
@@ -43,7 +43,7 @@ export const GeneralSettings: FC = observer(() => {
     {
       commonStore.platform === 'windows' &&
       <Labeled label={t('DPI Scaling')} flex spaceBetween content={
-        <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
+        <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
           value={commonStore.settings.dpiScaling + '%'}
           selectedOptions={[commonStore.settings.dpiScaling.toString()]}
           onOptionSelect={(_, data) => {
@@ -89,7 +89,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
                 apiUrl: data.value
               });
             }} />
-          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content' } }}
             value="..." selectedOptions={[]} expandIcon={null}
             onOptionSelect={(_, data) => {
               commonStore.setSettings({
@@ -140,7 +140,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
                 apiChatModelName: data.value
               });
             }} />
-          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content' } }}
             value="..." selectedOptions={[]} expandIcon={null}
             onOptionSelect={(_, data) => {
               if (data.optionValue) {
@@ -168,7 +168,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
                 apiCompletionModelName: data.value
               });
             }} />
-          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }}
+          <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content', minHeight: 0 } }}
             value="..." selectedOptions={[]} expandIcon={null}
             onOptionSelect={(_, data) => {
               if (data.optionValue) {