improve mobile view

frontend/src/App.tsx

@@ -51,10 +51,10 @@ const App: FC = observer(() => {
   useEffect(() => setPath(location.pathname), [location]);
 
   return (
-    <FluentProvider className="h-screen"
+    <FluentProvider
       theme={commonStore.settings.darkMode ? webDarkTheme : webLightTheme}
       data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}>
-      <div className="flex h-full">
+      <div className="flex h-screen">
         <div className="flex flex-col w-16 sm:w-48 p-2 justify-between">
           <TabList
             size="large"

frontend/src/pages/Composition.tsx

@@ -19,11 +19,13 @@ import { defaultCompositionPrompt } from './defaultConfigs';
 import { FileExists, OpenFileFolder, OpenSaveFileDialogBytes } from '../../wailsjs/go/backend_golang/App';
 import { getServerRoot, toastWithButton } from '../utils';
 import { CompositionParams } from '../types/composition';
+import { useMediaQuery } from 'usehooks-ts';
 
 let compositionSseController: AbortController | null = null;
 
 const CompositionPanel: FC = observer(() => {
   const { t } = useTranslation();
+  const mq = useMediaQuery('(min-width: 640px)');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
   const visualizerRef = useRef<VisualizerElement>(null);
@@ -204,7 +206,8 @@ const CompositionPanel: FC = observer(() => {
             setPrompt(e.target.value);
           }}
         />
-        <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full overflow-x-hidden overflow-y-auto p-1">
+        <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full">
+          <div className="flex flex-col gap-1 grow overflow-x-hidden overflow-y-auto p-1">
             <Labeled flex breakline label={t('Max Response Token')}
               desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
               content={
@@ -260,6 +263,7 @@ const CompositionPanel: FC = observer(() => {
                 autoPlay: data.checked as boolean
               });
             }} />
+          </div>
           <div className="flex justify-between gap-2">
             <ToolTipButton desc={t('Regenerate')} icon={<ArrowSync20Regular />} onClick={() => {
               compositionSseController?.abort();
@@ -298,7 +302,7 @@ const CompositionPanel: FC = observer(() => {
             ref={playerRef}
             style={{ width: '100%' }}
           />
-          <Button icon={<Save28Regular />}
+          <Button icon={<Save28Regular />} size={mq ? 'large' : 'medium'} appearance={mq ? 'secondary' : 'subtle'}
             onClick={() => {
               if (params.midi) {
                 OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => {
@@ -314,7 +318,7 @@ const CompositionPanel: FC = observer(() => {
               }
             }}
           >
-            {t('Save')}
+            {mq ? t('Save') : ''}
           </Button>
         </div>
       </div>

frontend/src/pages/Home.tsx

@@ -89,7 +89,7 @@ const Home: FC = observer(() => {
 
   return commonStore.platform === 'web' ?
     (
-      <div className="flex flex-col gap-2 h-full">
+      <div className="flex flex-col gap-2 h-full overflow-x-hidden overflow-y-auto">
         <img className="rounded-xl select-none object-cover grow"
           style={{ maxHeight: '40%' }} src={banner} />
         <div className="grow"></div>

frontend/src/style.scss

@@ -14,7 +14,6 @@
 
 body {
   margin: 0;
-  overflow: hidden;
   width: 100%;
   height: 100%;
 }