Make left sidebar hideable and fix header overlap on narrow widths

phd-advisor-frontend/src/components/Sidebar.js

@@ -575,6 +575,19 @@ const Sidebar = ({
           onClick={() => onMobileToggle(false)}
         />
       )}
+
+      {/* Floating handle to bring the sidebar back once it's hidden (desktop).
+          The in-sidebar toggle is off-screen when hidden, so this is the way back. */}
+      {isCollapsed && (
+        <button
+          className="sidebar-show-handle"
+          onClick={() => setIsCollapsed(false)}
+          title="Show sidebar"
+          aria-label="Show sidebar"
+        >
+          <PanelLeft size={18} />
+        </button>
+      )}
     </>
   );
 };

phd-advisor-frontend/src/pages/ChatPage.js

@@ -1052,7 +1052,7 @@ const handleNewChat = async (sessionId = null) => {
             )}
           </div>
 
-          <div className="floating-input-area">
+          <div className={`floating-input-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
             {replyingTo && (
               <div className="reply-banner">
                 <div className="reply-info">

phd-advisor-frontend/src/styles/CanvasPage.css

@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
 }
-.canvas-main-area.sidebar-collapsed { margin-left: 70px; }
+.canvas-main-area.sidebar-collapsed { margin-left: 0; }
 .canvas-app-shell {
   flex: 1;
   display: flex;
@@ -232,14 +232,14 @@
 }
 .canvas-page-with-sidebar .theme-toggle .theme-icon { display: block; }
 
-/* When the tabs sit in ChatPage's flex .floating-header, absolutely-position
-   them so they center regardless of header-left/header-right widths. */
+/* Keep the tabs as a normal in-flow flex child so they never overlap the
+   brand/title on the left or the controls on the right as the window narrows.
+   They sit between two equal flex regions (header-left / header-right), which
+   keeps them roughly centered without absolute positioning. */
 .floating-header { position: sticky; }
 .floating-header > .chat-view-tabs {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  position: relative;
+  flex: 0 0 auto;
 }
 .canvas-tabs-mobile { display: none; }
 @media (max-width: 900px) {

phd-advisor-frontend/src/styles/ChatPage.css

@@ -34,6 +34,8 @@
   display: flex;
   align-items: center;
   gap: 16px;
+  flex: 1 1 0;
+  min-width: 0; /* allow the brand title to truncate instead of pushing the tabs */
 }
 
 .modern-home-btn {
@@ -61,6 +63,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  min-width: 0; /* let the text column shrink so it can truncate */
 }
 
 .brand-icon {
@@ -78,6 +81,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
+  min-width: 0; /* enables text-overflow ellipsis on the children */
 }
 
 .brand-text h1 {
@@ -86,6 +90,9 @@
   color: var(--text-primary);
   margin: 0;
   line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .brand-text p {
@@ -93,12 +100,20 @@
   color: var(--text-secondary);
   margin: 0;
   line-height: 1.35;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 20px;
+  /* Grow to balance header-left (keeping the tabs centered), but the default
+     min-width:auto means the controls never shrink below their content and so
+     never overlap the tabs. header-left truncates its title first. */
+  flex: 1 1 0;
+  justify-content: flex-end;
 }
 
 .header-controls {
@@ -604,7 +619,7 @@
 }
 
 .floating-input-area.sidebar-collapsed {
-  left: 70px;
+  left: 0;
 }
 
 /* Reply Banner in ChatPage - matches input width and fixes dark mode */
@@ -674,9 +689,9 @@
   overflow: hidden;
 }
 
-/* FIXED: Chat area expansion when sidebar is collapsed */
+/* Chat area reclaims full width when the sidebar is hidden */
 .main-chat-area.sidebar-collapsed {
-  margin-left: 70px; /* Width of sidebar when collapsed */
+  margin-left: 0;
 }
 
 /* Optional header sign out button */

phd-advisor-frontend/src/styles/Sidebar.css

@@ -11,12 +11,15 @@
   top: 0;
   z-index: 100;
   overflow: hidden;
-  transition: width 0.3s ease;
+  transition: transform 0.3s ease, width 0.3s ease;
 }
 
-/* Collapsed state */
+/* Collapsed state — fully hide the sidebar off-canvas (desktop) so the main
+   content reclaims the full width. A floating handle (.sidebar-show-handle)
+   brings it back. */
 .sidebar.collapsed {
-  width: 70px;
+  transform: translateX(-100%);
+  box-shadow: none;
 }
 
 /* Dark theme support */
@@ -25,6 +28,46 @@
   border-right-color: var(--border-dark, #374151);
 }
 
+/* Floating handle shown when the sidebar is hidden, to reopen it */
+.sidebar-show-handle {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 54px;
+  padding: 0;
+  border: 1px solid var(--border-light, #e5e7eb);
+  border-left: none;
+  border-radius: 0 10px 10px 0;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-secondary, #6b7280);
+  cursor: pointer;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
+  transition: width 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-show-handle:hover {
+  width: 32px;
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.dark .sidebar-show-handle {
+  background: var(--bg-primary-dark, #1f2937);
+  border-color: var(--border-dark, #374151);
+  color: var(--text-secondary, #9ca3af);
+}
+
+.dark .sidebar-show-handle:hover {
+  background: var(--bg-secondary-dark, #374151);
+  color: var(--text-primary-dark, #f9fafb);
+}
+
 /* Toggle Button - Matches User Menu Style */
 .sidebar-toggle {
   display: flex;
@@ -842,7 +885,6 @@
   }
   
   .sidebar.collapsed {
-    width: 70px;
     transform: translateX(-100%); /* Keep hidden when collapsed on mobile */
   }
   
@@ -853,4 +895,10 @@
   .mobile-sidebar-overlay.visible {
     display: block;
   }
+
+  /* On mobile the header hamburger opens the sidebar, so the desktop
+     reopen handle is redundant. */
+  .sidebar-show-handle {
+    display: none;
+  }
 }