❇️ style(ModelSpecs): optimize for Long/Chinese name and mobile styli…

…ng (danny-avila#2731) * style: hide nav toggle for mobile * ❇️ style: optimize for Long/Chinese `modelSpec` name and mobile styling
networkninja · May 15, 2024 · 4a5d06a · 4a5d06a
1 parent fc9368e
commit 4a5d06a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/client/src/components/Chat/Menus/Models/MenuButton.tsx b/client/src/components/Chat/Menus/Models/MenuButton.tsx
@@ -2,14 +2,19 @@ import { Trigger } from '@radix-ui/react-popover';
 import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
 import { useLocalize } from '~/hooks';
 import SpecIcon from './SpecIcon';
+import { cn } from '~/utils';
 
 export default function MenuButton({
   selected,
+  className = '',
+  textClassName = '',
   primaryText = '',
   secondaryText = '',
   endpointsConfig,
 }: {
   selected?: TModelSpec;
+  className?: string;
+  textClassName?: string;
   primaryText?: string;
   secondaryText?: string;
   endpointsConfig: TEndpointsConfig;
@@ -18,13 +23,16 @@ export default function MenuButton({
   return (
     <Trigger asChild>
       <div
-        className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700"
+        className={cn(
+          'group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
+          className,
+        )}
         // type="button"
       >
         {selected && selected.showIconInHeader && (
           <SpecIcon currentSpec={selected} endpointsConfig={endpointsConfig} />
         )}
-        <div>
+        <div className={textClassName}>
           {!selected ? localize('com_ui_none_selected') : primaryText}{' '}
           {!!secondaryText && <span className="text-token-text-secondary">{secondaryText}</span>}
         </div>

diff --git a/client/src/components/Chat/Menus/Models/ModelSpec.tsx b/client/src/components/Chat/Menus/Models/ModelSpec.tsx
@@ -64,7 +64,7 @@ const MenuItem: FC<MenuItemProps> = ({
           <div>
             <div className="flex items-center gap-2">
               {showIconInMenu && <SpecIcon currentSpec={spec} endpointsConfig={endpointsConfig} />}
-              <div>
+              <div className="break-all">
                 {title}
                 <div className="text-token-text-tertiary">{description}</div>
               </div>

diff --git a/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx b/client/src/components/Chat/Menus/Models/ModelSpecsMenu.tsx
@@ -70,8 +70,10 @@ export default function ModelSpecsMenu({ modelSpecs }: { modelSpecs: TModelSpec[
   return (
     <Root>
       <MenuButton
-        primaryText={selected?.label ?? ''}
         selected={selected}
+        className="min-h-11"
+        textClassName="block items-center justify-start text-xs md:text-base whitespace-nowrap max-w-64 overflow-hidden shrink-0 text-ellipsis"
+        primaryText={selected?.label ?? ''}
         endpointsConfig={endpointsConfig}
       />
       <Portal>

diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
@@ -160,7 +160,7 @@ const Nav = ({ navVisible, setNavVisible }) => {
           setIsHovering={setIsToggleHovering}
           onToggle={toggleNavVisible}
           navVisible={navVisible}
-          className="fixed left-0 top-1/2 z-40"
+          className="fixed left-0 top-1/2 z-40 hidden md:flex"
         />
         <div className={`nav-mask${navVisible ? ' active' : ''}`} onClick={toggleNavVisible} />
       </Tooltip>