More mobile UI tweaks (chatbox, logo, model selector)

Author: ranven

src/client/components/ChatV2/ChatBox.tsx

@@ -237,7 +237,7 @@ export const ChatBox = ({
           </Box>
         </Box>
 
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.5rem 0rem' }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.4rem 0' }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <Typography
               variant="body1"
@@ -247,14 +247,14 @@ export const ChatBox = ({
             </Typography>
             <Tooltip
               arrow
-              placement="right"
+              placement="top"
               title={
                 <Typography variant="body2" sx={{ p: 1 }}>
                   {t('info:usage')}
                 </Typography>
               }
             >
-              <HelpOutline fontSize="small" sx={{ color: 'inherit', opacity: 0.7, mt: 0.5 }} />
+              <HelpOutline fontSize="small" sx={{ color: 'inherit', opacity: 0.7, mt: 0.5, flex: 2, display: { xs: 'none', sm: 'block' } }} />
             </Tooltip>
           </Box>
 

src/client/components/ChatV2/EmailButton.tsx

@@ -143,7 +143,7 @@ const formatEmail = (messages: Message[], t: any): string => {
       return `
       <div style="padding: 2rem; ${
         role === 'user'
-          ? 'background: #efefef; margin-left: 20px; border-radius: 0.6rem; box-shadow: 0px 2px 2px rgba(0,0,0,0.2); white-space: pre-wrap; word-break: break-word; '
+          ? 'background: #efefef; margin-left: 100px; border-radius: 0.6rem; box-shadow: 0px 2px 2px rgba(0,0,0,0.2); white-space: pre-wrap; word-break: break-word; '
           : 'margin-right: 2rem;'
       }">
         <h3 style="font-style: italic; margin: 0; ${role === 'user' ? 'color: rgba(0, 0, 0, 0.8)' : 'color: #107eab'}">${t(`email:${role}`)}:</h3>

src/client/components/ChatV2/ModelSelector.tsx

@@ -18,12 +18,26 @@ const ModelSelector = ({
   const validModel = availableModels.includes(currentModel) ? currentModel : ''
 
   return (
-    <FormControl sx={{ minWidth: 100, opacity: 0.7 }} size="small">
+    <FormControl
+      sx={{
+        minWidth: 100,
+        maxWidth: { xs: 60, md: 250 },
+        opacity: 0.7,
+      }}
+      size="small"
+    >
       <Select
         sx={{
           '& .MuiOutlinedInput-notchedOutline': {
             border: 'none',
           },
+          '& .MuiSelect-select': {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            paddingLeft: { xs: '4px !important', md: '10px !important' },
+            paddingRight: { xs: '20px !important', md: '30px !important' },
+            maxWidth: { xs: '50px', md: '240px' },
+          },
         }}
         id="model-selector"
         value={validModel}

src/client/components/ChatV2/generics/ConversationSplash.tsx

@@ -25,7 +25,16 @@ export const ConversationSplash = ({ courseName, courseDate }: { courseName?: st
         },
       }}
     >
-      <img src={hyLogo} alt="University of Helsinki" width="240" style={{ opacity: 0.2, marginBottom: '2rem' }} />
+      <Box
+        component="img"
+        src={hyLogo}
+        alt="University of Helsinki"
+        sx={{
+          width: { xs: '140px', sm: '240px', md: '300px' },
+          opacity: 0.2,
+          m: '2.5rem 0',
+        }}
+      />
       {courseName ? (
         <>
           <Typography variant="h4" fontWeight="bold" sx={{ mb: 1, opacity: 0.5 }}>