🎨 style: Improve Styling (#3205)

* style: add scrollbar-gutter to prevent layout shift

* style: better styling for simple/advanced tab and remove border-r on smaller screens

* style: better description styling

* style: make sure single response Messages style is the same as pre-multi-stream response feature

client/src/components/Chat/Messages/Message.tsx

@@ -27,7 +27,10 @@ const MessageContainer = React.memo(
 );
 
 const PlaceholderRow = React.memo(({ isLast, isCard }: { isLast: boolean; isCard?: boolean }) => {
-  if (!isLast && !isCard) {
+  if (!isCard) {
+    return null;
+  }
+  if (!isLast) {
     return null;
   }
   return <div className="mt-1 h-[27px] bg-transparent" />;
@@ -99,7 +102,7 @@ const MessageRender = React.memo(
           'final-completion group mx-auto flex flex-1 gap-3 text-base',
           isCard
             ? 'relative w-full gap-1 rounded-lg border border-border-medium bg-surface-primary-alt p-2 md:w-1/2 md:gap-3 md:p-4'
-            : '',
+            : 'md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]',
           isLatest ? 'bg-surface-secondary' : '',
           isLast && !isSubmittingFamily && isCard
             ? 'cursor-pointer transition-colors duration-300'
@@ -212,9 +215,7 @@ export default function Message(props: TMessageProps) {
           </div>
         ) : (
           <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
-            <div className="final-completion group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
-              <MessageRender {...props} />
-            </div>
+            <MessageRender {...props} />
           </div>
         )}
       </MessageContainer>

client/src/components/Prompts/AdvancedSwitch.tsx

@@ -1,7 +1,8 @@
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { Tabs, TabsList, TabsTrigger } from '~/components/ui';
 import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
 import store from '~/store';
+
 const { PromptsEditorMode, promptsEditorMode, alwaysMakeProd } = store;
 
 const AdvancedSwitch = () => {
@@ -10,29 +11,35 @@ const AdvancedSwitch = () => {
   const setAlwaysMakeProd = useSetRecoilState(alwaysMakeProd);
 
   return (
-    <Tabs
-      defaultValue={mode}
-      className="w-auto rounded-lg"
-      onValueChange={(value) => {
-        value === PromptsEditorMode.SIMPLE && setAlwaysMakeProd(true);
-        setMode(value);
-      }}
-    >
-      <TabsList className="grid w-auto grid-cols-2 bg-surface-tertiary">
-        <TabsTrigger
-          value={PromptsEditorMode.SIMPLE}
-          className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
+    <div className="inline-flex h-10 items-center justify-center rounded-lg border border-border-light bg-surface-primary p-0.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50">
+      <div className="flex flex-row items-stretch gap-0 whitespace-nowrap">
+        <button
+          type="button"
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
+            mode === PromptsEditorMode.SIMPLE
+              ? 'bg-surface-tertiary text-text-primary'
+              : 'bg-transparent text-text-tertiary hover:text-text-secondary'
+          }`}
+          onClick={() => {
+            setAlwaysMakeProd(true);
+            setMode(PromptsEditorMode.SIMPLE);
+          }}
         >
           {localize('com_ui_simple')}
-        </TabsTrigger>
-        <TabsTrigger
-          value={PromptsEditorMode.ADVANCED}
-          className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
+        </button>
+        <button
+          type="button"
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
+            mode === PromptsEditorMode.ADVANCED
+              ? 'bg-surface-tertiary text-text-primary'
+              : 'bg-transparent text-text-tertiary hover:text-text-secondary'
+          }`}
+          onClick={() => setMode(PromptsEditorMode.ADVANCED)}
         >
           {localize('com_ui_advanced')}
-        </TabsTrigger>
-      </TabsList>
-    </Tabs>
+        </button>
+      </div>
+    </div>
   );
 };
 

client/src/components/Prompts/Description.tsx

@@ -50,7 +50,7 @@ const Description = ({
           placeholder={localize('com_ui_description_placeholder')}
           value={description}
           onChange={handleInputChange}
-          className="w-full rounded-lg border-none bg-transparent p-1 text-text-primary placeholder:text-text-tertiary placeholder:underline placeholder:underline-offset-2 focus:bg-surface-tertiary focus:outline-none focus:ring-0 md:w-96"
+          className="w-full rounded-lg border-none bg-surface-tertiary p-1 text-text-primary placeholder:text-text-secondary-alt focus:bg-surface-tertiary focus:outline-none focus:ring-0 md:w-96"
         />
         {!disabled && (
           <span className="mr-1 w-10 text-xs text-text-tertiary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>

client/src/components/Prompts/PromptForm.tsx

@@ -278,7 +278,7 @@ const PromptForm = () => {
           )}
           <div className="flex h-full w-full flex-col md:flex-row">
             {/* Left Section */}
-            <div className="flex-1 overflow-y-auto border-r border-gray-300 p-4 dark:border-gray-600 md:max-h-[calc(100vh-150px)]">
+            <div className="flex-1 overflow-y-auto border-gray-300 p-4 dark:border-gray-600 md:max-h-[calc(100vh-150px)] md:border-r">
               {isLoadingPrompts ? (
                 <Skeleton className="h-96" />
               ) : (

client/src/components/Prompts/PromptsView.tsx

@@ -46,7 +46,7 @@ export default function PromptsView() {
         </GroupSidePanel>
         <div
           className={cn(
-            'w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
+            'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',
             isDetailView ? 'block' : 'hidden md:block',
           )}
         >

client/src/components/Prompts/SkeletonForm.tsx

@@ -8,7 +8,7 @@ export default function SkeletonForm() {
       </div>
       <div className="flex h-full w-full flex-col md:flex-row">
         {/* Left Section */}
-        <div className="flex-1 overflow-y-auto border-r border-border-medium-alt p-4 md:max-h-[calc(100vh-150px)]">
+        <div className="flex-1 overflow-y-auto border-border-medium-alt p-4 md:max-h-[calc(100vh-150px)] md:border-r">
           <Skeleton className="h-96" />
         </div>
       </div>

client/src/mobile.css

@@ -288,3 +288,7 @@
 .slow-pulse {
   animation: slowPulse 2.5s ease-in-out infinite;
 }
+
+.scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}

client/src/style.css

@@ -25,6 +25,7 @@
 html {
   --text-primary:var(--gray-800);
   --text-secondary:var(--gray-600);
+  --text-secondary-alt:var(--gray-500);
   --text-tertiary:var(--gray-500);
   --surface-primary:var(--white);
   --surface-primary-alt:var(--white);
@@ -40,6 +41,7 @@ html {
 .dark {
   --text-primary:var(--gray-100);
   --text-secondary:var(--gray-300);
+  --text-secondary-alt:var(--gray-400);
   --text-tertiary:var(--gray-500);
   --surface-primary:var(--gray-900);
   --surface-primary-alt:var(--gray-850);

client/tailwind.config.cjs

@@ -66,6 +66,7 @@ module.exports = {
         'brand-purple': '#ab68ff',
         'text-primary': 'var(--text-primary)',
         'text-secondary': 'var(--text-secondary)',
+        'text-secondary-alt': 'var(--text-secondary-alt)',
         'text-tertiary': 'var(--text-tertiary)',
         'surface-primary': 'var(--surface-primary)',
         'surface-primary-alt': 'var(--surface-primary-alt)',