Improve tablet icon arrangement and synchronize breakpoints

app/globals.css

@@ -147,7 +147,7 @@
     gap: 10px;
     padding: 0 5px;
     min-width: max-content;
-    /* justify-content: space-between; */
+    /* justify-content: space-evenly; */
   }
 
   .mobile-icons-bar-content > * {
@@ -159,8 +159,8 @@
     .mobile-icons-bar-content {
       min-width: 0;
       width: 100%;
-      justify-content: space-between;
-      gap: 0; /* Remove gap if using space-between */
+      justify-content: space-evenly;
+      gap: 10px;
     }
   }
 

components/chat-panel.tsx

@@ -190,7 +190,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         'flex flex-col items-start',
         isMobile
           ? 'w-full h-full'
-          : 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 md:px-4'
+          : 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 lg:px-4'
       )}
     >
       <form

components/chat.tsx

@@ -56,7 +56,7 @@ export function Chat({ id }: ChatProps) {
   useEffect(() => {
     // Check if device is mobile
     const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
+      setIsMobile(window.innerWidth < 1024)
     }
 
     // Initial check
@@ -175,7 +175,7 @@ export function Chat({ id }: ChatProps) {
       <HeaderSearchButton />
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
-        <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-16 md:pt-20 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
+        <div className="w-1/2 flex flex-col space-y-3 lg:space-y-4 px-8 sm:px-12 pt-16 lg:pt-20 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
         {isCalendarOpen ? (
           <CalendarNotepad chatId={id} />
         ) : (

components/copilot-display.tsx

@@ -19,7 +19,7 @@ export function CopilotDisplay({ content }: CopilotDisplayProps) {
       .join(', ')
 
     return (
-      <Card className="p-3 md:p-4 w-full flex justify-between items-center">
+      <Card className="p-3 lg:p-4 w-full flex justify-between items-center">
         <h5 className="text-muted-foreground text-xs truncate">{query}</h5>
         <Check size={16} className="text-green-500 w-4 h-4" />
       </Card>

components/copilot.tsx

@@ -112,7 +112,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
 
   if (completed) {
     return (
-      <Card className="p-3 md:p-4 w-full flex justify-between items-center">
+      <Card className="p-3 lg:p-4 w-full flex justify-between items-center">
         <div className="flex items-center space-x-2 flex-1 min-w-0">
           <h5 className="text-muted-foreground text-xs truncate">
             {updatedQuery()}

components/footer.tsx

@@ -5,7 +5,7 @@ import { Button } from './ui/button'
 
 const Footer: React.FC = () => {
   return (
-    <footer className="w-fit p-1 md:p-2 fixed bottom-0 right-0">
+    <footer className="w-fit p-1 lg:p-2 fixed bottom-0 right-0">
     </footer>
   )
 }

components/header.tsx

@@ -44,7 +44,7 @@ export const Header = () => {
   return (
     <>
       <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
-    <header className="fixed w-full p-1 md:p-2 hidden md:flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
+    <header className="fixed w-full p-1 lg:p-2 hidden lg:flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
       <div>
         <a href="/">
           <span className="sr-only">Chat</span>
@@ -66,7 +66,7 @@ export const Header = () => {
         </h1>
       </div>
 
-      <div className="flex-1 hidden md:flex justify-center gap-10 items-center z-10">
+      <div className="flex-1 hidden lg:flex justify-center gap-10 items-center z-10">
         <ProfileToggle/>
 
         <MapToggle />
@@ -87,7 +87,7 @@ export const Header = () => {
       </div>
 
       {/* Mobile menu buttons */}
-      <div className="flex md:hidden gap-2">
+      <div className="flex lg:hidden gap-2">
 
         <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />

components/history-sidebar.tsx

@@ -24,7 +24,7 @@ export function HistorySidebar() {
             History
           </SheetTitle>
         </SheetHeader>
-        <div className="my-2 h-full pb-12 md:pb-10">
+        <div className="my-2 h-full pb-12 lg:pb-10">
           <Suspense fallback={<HistorySkeleton />}>
             <ChatHistoryClient />
           </Suspense>

components/map/mapbox-map.tsx

@@ -285,7 +285,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
     map.current.addControl(drawRef.current, 'top-right')
 
     // Add navigation control only on desktop
-    if (window.innerWidth > 768) {
+    if (window.innerWidth > 1024) {
       navControlRef.current = new mapboxgl.NavigationControl()
       map.current.addControl(navControlRef.current, 'top-left')
     }
@@ -387,7 +387,7 @@ export const Mapbox: React.FC<{ position?: { latitude: number; longitude: number
         }
         initialPitch = pitch ?? tilt ?? 0;
         initialBearing = bearing ?? heading ?? 0;
-      } else if (typeof window !== 'undefined' && window.innerWidth < 768) {
+      } else if (typeof window !== 'undefined' && window.innerWidth < 1024) {
         initialZoom = 1.3;
       }
 

components/profile-toggle.tsx

@@ -14,7 +14,7 @@ export function ProfileToggle() {
 
   useEffect(() => {
     const handleResize = () => {
-      const mobile = window.innerWidth < 768
+      const mobile = window.innerWidth < 1024
       setIsMobile(mobile)
       if (mobile) {
         setAlignValue("start") // Right align on mobile too

components/search-results-image.tsx

@@ -67,7 +67,7 @@ export const SearchResultsImageSection: React.FC<
         <Dialog key={index}>
           <DialogTrigger asChild>
             <motion.div
-              className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
+              className="w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
               onClick={() => setSelectedIndex(index)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}

components/search-results.tsx

@@ -24,7 +24,7 @@ export function SearchResults({ results }: SearchResultsProps) {
   return (
     <div className="flex flex-wrap">
       {displayedResults.map((result: any, index: any) => (
-        <div className="w-1/2 md:w-1/4 p-1" key={index}>
+        <div className="w-1/2 lg:w-1/4 p-1" key={index}>
           <Link href={result.url} passHref target="_blank">
             <Card className="flex-1">
               <CardContent className="p-2">
@@ -53,7 +53,7 @@ export function SearchResults({ results }: SearchResultsProps) {
         </div>
       ))}
       {!showAllResults && additionalResultsCount > 0 && (
-        <div className="w-1/2 md:w-1/4 p-1">
+        <div className="w-1/2 lg:w-1/4 p-1">
           <Card className="flex-1 flex h-full items-center justify-center">
             <CardContent className="p-2">
               <Button

components/search-skeleton.tsx

@@ -10,7 +10,7 @@ export const SearchSkeleton = () => {
       <div className="flex flex-wrap gap-2">
         {Array.from({ length: 4 }).map((_, index) => (
           <div
-            className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] p-2"
+            className="w-[calc(50%-0.5rem)] lg:w-[calc(25%-0.5rem)] p-2"
             key={index}
           >
             <div className="flex-1">

components/settings/components/user-management-form.tsx

@@ -79,12 +79,12 @@ export function UserManagementForm({ form }: UserManagementFormProps) {
       <CardContent className="space-y-6">
         <div className="space-y-4">
           <h4 className="text-lg font-medium">Add New User</h4>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start">
             <FormField
               control={form.control}
               name="newUserEmail"
               render={({ field }) => (
-                <FormItem className="md:col-span-2">
+                <FormItem className="lg:col-span-2">
                   <FormLabel>Email Address</FormLabel>
                   <FormControl>
                     <Input {...field} placeholder="user@example.com" />

components/ui/lottie-player.tsx

@@ -13,7 +13,7 @@ const LottiePlayer: React.FC<LottiePlayerProps> = ({ isVisible }) => {
   }
 
   return (
-    <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-background/80 backdrop-blur-lg md:backdrop-blur-sm z-[9999]">
+    <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-background/80 backdrop-blur-lg lg:backdrop-blur-sm z-[9999]">
       <Lottie animationData={animationData} style={{ width: 300, height: 300 }} loop={true} />
     </div>
   );

components/ui/toast.tsx

@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col lg:max-w-[420px]",
       className,
     )}
     {...props}

components/video-search-results.tsx

@@ -76,7 +76,7 @@ export function VideoSearchResults({ results }: VideoSearchResultsProps) {
         <Dialog key={index}>
           <DialogTrigger asChild>
             <div
-              className="w-1/2 md:w-1/4 p-1 cursor-pointer relative"
+              className="w-1/2 lg:w-1/4 p-1 cursor-pointer relative"
               onClick={() => setSelectedIndex(index)}
             >
               <Card className="flex-1 min-h-40 ">

server.log

@@ -1,11 +1,5 @@
-$ next dev --turbo
- ⚠ Port 3000 is in use, using available port 3003 instead.
-   ▲ Next.js 15.3.6 (Turbopack)
-   - Local:        http://localhost:3003
-   - Network:      http://192.168.0.2:3003
-   - Environments: .env.local, .env
 
- ✓ Starting...
- ○ Compiling middleware ...
- ✓ Compiled middleware in 648ms
- ✓ Ready in 2.5s
+> QCX@0.1.0 start
+> next start
+
+sh: 1: next: not found