truncate left side panel buttons overflow

Author: sutigit

src/client/components/ChatV2/ChatV2.tsx

@@ -597,7 +597,7 @@ const LeftMenu = ({
             {t('chat:emptyConversation')}
           </OutlineButtonBlack>
           <ModelSelector currentModel={currentModel} setModel={setModel} isTokenLimitExceeded={isTokenLimitExceeded} />
-          <PromptSelector sx={{ width: '100%' }} />
+          <PromptSelector />
           <EmailButton messages={messages} disabled={!messages?.length} />
           <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} data-testid="settings-button">
             {t('chat:settings')}

src/client/components/ChatV2/PromptSelector.tsx

@@ -26,7 +26,7 @@ const PromptSelector = ({ sx = {}, handleDeletePrompt }: { sx?: object; handleDe
   return (
     <Box>
       <OutlineButtonBlack
-        sx={sx}
+        sx={{ width: '100%' }}
         startIcon={<AutoAwesome />}
         data-testid={`prompt-selector-button`}
         disabled={!!mandatoryPrompt}
@@ -35,8 +35,13 @@ const PromptSelector = ({ sx = {}, handleDeletePrompt }: { sx?: object; handleDe
         }}
         endIcon={mandatoryPrompt ? <Lock /> : <KeyboardArrowDown />}
       >
-        {activePrompt?.name ?? t('settings:choosePrompt')}
-        {!!mandatoryPrompt && ` - ${t('settings:promptLocked')}`}
+        <Box sx={{
+          overflow: 'hidden',
+          width: { md: 140, lg: 160 },
+          textOverflow: 'ellipsis',
+        }}>
+          {activePrompt?.name ?? t('settings:choosePrompt')}
+        </Box>
       </OutlineButtonBlack>
       <Menu
         anchorEl={anchorEl}