Merge pull request #75 from DarkGenius/fix/ui-layout

fix(ui): improve layout

Author: Dumbris

frontend/src/App.vue

@@ -3,12 +3,12 @@
     <input id="sidebar-drawer" type="checkbox" class="drawer-toggle" />
 
     <!-- Main content area -->
-    <div class="drawer-content flex flex-col min-h-screen bg-base-200">
+    <div class="drawer-content grid grid-rows-[auto_1fr] h-screen bg-base-200 lg:pl-64">
       <!-- Top Header -->
       <TopHeader />
 
       <!-- Page content -->
-      <main class="flex-1 p-6 overflow-x-hidden max-w-full">
+      <main class="overflow-y-auto p-6">
         <router-view v-slot="{ Component }">
           <transition name="page" mode="out-in">
             <component :is="Component" />

frontend/src/components/CollapsibleHintsPanel.vue

@@ -145,8 +145,6 @@ const copyToClipboard = async (text: string) => {
 <style scoped>
 .hints-panel-wrapper {
   margin-top: 2rem;
-  position: sticky;
-  bottom: 1rem;
   z-index: 10;
 }
 

frontend/src/components/SidebarNav.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="drawer-side z-40">
     <label for="sidebar-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-    <aside class="bg-base-100 w-64 min-h-screen flex flex-col border-r border-base-300">
+    <aside class="bg-base-100 w-64 h-screen flex flex-col border-r border-base-300 fixed">
       <!-- Logo Section -->
-      <div class="p-6 border-b border-base-300">
+      <div class="px-6 py-5 border-b border-base-300">
         <router-link to="/" class="flex items-center space-x-3">
           <img src="/src/assets/logo.svg" alt="MCPProxy Logo" class="w-10 h-10" />
           <span class="text-xl font-bold">MCPProxy</span>