Maximize interface for mobile phone viewports with touch-friendly swipeable navigation bar and responsive layouts

.app.pid

@@ -1 +1 @@
-269065
+270801

src/components/Sidebar.tsx

@@ -81,13 +81,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
   ];
 
   return (
-    <aside className="w-full md:w-64 bg-slate-900 border-r border-slate-800 flex flex-col p-3 gap-1 shrink-0">
+    <aside className="w-full md:w-64 bg-slate-900 border-b md:border-b-0 md:border-r border-slate-800 flex flex-col p-2.5 sm:p-3 gap-1 shrink-0 overflow-x-auto md:overflow-x-visible">
       
-      <div className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
+      <div className="hidden md:block px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
         Portal Navigation
       </div>
 
-      <nav className="flex flex-col gap-1">
+      <nav className="flex flex-row md:flex-col gap-1 overflow-x-auto md:overflow-x-visible no-scrollbar py-1 md:py-0">
         {navItems.map((item) => {
           const Icon = item.icon;
           const isActive = activeTab === item.id;
@@ -96,19 +96,19 @@ export const Sidebar: React.FC<SidebarProps> = ({
             <button
               key={item.id}
               onClick={() => setActiveTab(item.id)}
-              className={`flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-xs transition-all ${
+              className={`flex items-center justify-between px-3 py-2 sm:px-3.5 sm:py-2.5 rounded-xl font-medium text-xs whitespace-nowrap transition-all shrink-0 md:shrink ${
                 isActive
                   ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/30 font-semibold'
-                  : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/80'
+                  : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/80 bg-slate-950/60 md:bg-transparent border border-slate-800/80 md:border-none'
               }`}
             >
-              <div className="flex items-center gap-2.5">
+              <div className="flex items-center gap-2">
                 <Icon className={`w-4 h-4 ${isActive ? 'text-white' : item.highlight ? 'text-amber-400' : 'text-slate-400'}`} />
                 <span>{item.label}</span>
               </div>
 
               {item.badge && (
-                <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold border ${item.badgeColor}`}>
+                <span className={`hidden sm:inline-block ml-2 px-1.5 py-0.5 rounded-full text-[10px] font-bold border ${item.badgeColor}`}>
                   {item.badge}
                 </span>
               )}
@@ -118,7 +118,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
       </nav>
 
       {/* Quick AI Assist Card in Sidebar */}
-      <div className="mt-auto pt-4 border-t border-slate-800/80 px-2">
+      <div className="hidden md:block mt-auto pt-4 border-t border-slate-800/80 px-2">
         <div className="p-3 rounded-xl bg-gradient-to-br from-indigo-950/60 to-slate-900 border border-indigo-500/20 text-slate-300">
           <div className="flex items-center gap-2 text-xs font-semibold text-indigo-300 mb-1">
             <Zap className="w-3.5 h-3.5 text-amber-400" />

src/index.css

@@ -1 +1,17 @@
 @import "tailwindcss";
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* Smooth mobile touch scrolling */
+* {
+  -webkit-overflow-scrolling: touch;
+}