additional improvements

web/src/app/assistants/SidebarWrapper.tsx

@@ -149,7 +149,7 @@ export default function SidebarWrapper<T extends object>({
                       bg-opacity-80
                       duration-300 
                       ease-in-out
-                      ${toggledSidebar ? "w-[250px]" : "w-[0px]"}`}
+                      ${toggledSidebar ? "desktop:w-[250px]" : "w-[0px]"}`}
           />
 
           <div

web/src/app/assistants/ToolsDisplay.tsx

@@ -13,7 +13,9 @@ export function AssistantTools({
   return (
     <div className="relative text-xs overflow-x-hidden flex text-subtle">
       <span
-        className={`${assistant.tools.length > 0 && "py-1"}  ${!list ? "font-semibold" : "text-subtle text-sm"}`}
+        className={`${assistant.tools.length > 0 && "py-1"}  ${
+          !list ? "font-semibold" : "text-subtle text-sm"
+        }`}
       >
         Tools:
       </span>{" "}
@@ -62,7 +64,8 @@ export function AssistantTools({
                       key={ind}
                       className="ml-1 my-auto h-3 w-3 my-auto"
                     />
-                    Image Generation
+                    <span className="mobile:hidden">Image </span>
+                    <span className="desktop:hidden">Generation</span>
                   </div>
                 </div>
               );
@@ -79,7 +82,13 @@ export function AssistantTools({
                   w-fit 
                   flex
                   items-center
-                  ${hovered ? "bg-background-300" : list ? "bg-background-125" : "bg-background-100"}`}
+                  ${
+                    hovered
+                      ? "bg-background-300"
+                      : list
+                        ? "bg-background-125"
+                        : "bg-background-100"
+                  }`}
                 >
                   <div className="flex gap-x-1">{tool.name}</div>
                 </div>

web/src/app/assistants/gallery/AssistantsGallery.tsx

@@ -207,26 +207,28 @@ export function AssistantsGallery() {
   return (
     <>
       {popup}
-      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
+      <div className="px-2 mx-auto desktop:w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
         <AssistantsPageTitle>Assistant Gallery</AssistantsPageTitle>
-
-        <div className="grid grid-cols-2 gap-4 mt-4 mb-6">
+        <div className="grid grid-cols-2 gap-4 mt-4 mb-8">
           <Button
-            onClick={() => router.push("/assistants/new")}
             variant="default"
-            className="p-6 text-base"
+            className="p-2 desktop:p-6 text-base"
+            onClick={() => router.push("/assistants/new")}
             icon={FiPlus}
           >
-            Create New Assistant
+            <span className="mobile:hidden">Create </span>{" "}
+            <span className="desktop:inline">New</span>{" "}
+            <span className="mobile:hidden">Assistant</span>
           </Button>
 
           <Button
             onClick={() => router.push("/assistants/mine")}
             variant="outline"
-            className="text-base py-6"
+            className="text-base p-2 desktop:p-6"
             icon={FiList}
           >
-            Your Assistants
+            <span className="mobile:hidden">Your </span>{" "}
+            <span className="desktop:inline">Yours</span>
           </Button>
         </div>
 

web/src/app/assistants/mine/AssistantsList.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, {
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { MinimalUserSnapshot, User } from "@/lib/types";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { Button } from "@/components/ui/button";
@@ -59,6 +65,7 @@ import { MakePublicAssistantModal } from "@/app/chat/modal/MakePublicAssistantMo
 import { CustomTooltip } from "@/components/tooltip/CustomTooltip";
 import { useAssistants } from "@/components/context/AssistantsContext";
 import { useUser } from "@/components/user/UserProvider";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
 
 function DraggableAssistantListItem({ ...props }: any) {
   const {
@@ -80,11 +87,19 @@ function DraggableAssistantListItem({ ...props }: any) {
   };
 
   return (
-    <div ref={setNodeRef} style={style} className="flex mt-2 items-center">
-      <div {...attributes} {...listeners} className="mr-2 cursor-grab">
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="max-w-full flex mt-2 items-center"
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        className="mobile:hidden mr-2 cursor-grab"
+      >
         <DragHandle />
       </div>
-      <div className="flex-grow">
+      <div className="max-w-full flex-grow">
         <AssistantListItem isDragging={isDragging} {...props} />
       </div>
     </div>
@@ -138,7 +153,7 @@ function AssistantListItem({
         <div className="flex justify-between items-center">
           <AssistantIcon assistant={assistant} />
 
-          <h2 className="ml-6 w-fit flex-grow space-y-3 text-start flex text-xl font-semibold line-clamp-2 text-gray-800">
+          <h2 className="ml-6 flex-grow w-fit space-y-3 text-start flex text-xl font-semibold mobile:min-w-20 desktop:line-clamp-2 text-gray-800">
             {assistant.name}
           </h2>
 
@@ -388,26 +403,29 @@ export function AssistantsList() {
         />
       )}
 
-      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
+      <div className="px-2 w-full mx-auto desktop:w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
         <AssistantsPageTitle>Your Assistants</AssistantsPageTitle>
 
         <div className="grid grid-cols-2 gap-4 mt-4 mb-8">
           <Button
             variant="default"
-            className="p-6 text-base"
+            className="p-2 desktop:p-6 text-base"
             onClick={() => router.push("/assistants/new")}
             icon={FiPlus}
           >
-            Create New Assistant
+            <span className="mobile:hidden">Create </span>{" "}
+            <span className="desktop:inline">New</span>{" "}
+            <span className="mobile:hidden">Assistant</span>
           </Button>
 
           <Button
             onClick={() => router.push("/assistants/gallery")}
             variant="outline"
-            className="text-base py-6"
+            className="text-base p-2 desktop:p-6"
             icon={FiList}
           >
-            Assistant Gallery
+            <span className="mobile:hidden">Assistant </span>{" "}
+            <span className="desktop:inline">Gallery</span>
           </Button>
         </div>
 

web/src/app/assistants/mine/WrappedInputPrompts.tsx

@@ -35,7 +35,7 @@ export default function WrappedPrompts({
       folders={folders}
       openedFolders={openedFolders}
     >
-      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
+      <div className="mx-auto desktop:w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
         <AssistantsPageTitle>Prompt Gallery</AssistantsPageTitle>
         <PromptSection
           promptLibrary={promptLibrary || []}

web/src/app/assistants/new/page.tsx

@@ -19,7 +19,7 @@ export default async function Page() {
   } else {
     body = (
       <div className="w-full my-16">
-        <div className="px-32">
+        <div className="mobile:px-4 desktop:px-32">
           <div className="mx-auto container">
             <CardSection>
               <AssistantEditor