update for mobile layout

src/app/components/analyzer/analyzer.component.scss

@@ -1,5 +1,6 @@
 .main-content {
   padding: 40px 0;
+  overflow-x: hidden;
 }
 
 .row {
@@ -17,7 +18,11 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  width: 100%; // full width on mobile
+
+  @media (max-width: 768px) {
+    flex: 1 1 auto;
+    width: 100%;
+  }
 }
 
 .col-right {
@@ -256,6 +261,8 @@
   grid-template-columns: 320px 1fr 400px;
   gap: 24px;
   align-items: start;
+  min-width: 0;
+  overflow-x: hidden;
 
   @media (max-width: 1200px) {
     grid-template-columns: 280px 1fr 340px;
@@ -264,6 +271,12 @@
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 12px;
   }
 }
 
@@ -271,13 +284,14 @@
   display: flex;
   flex-direction: column;
   gap: 0;
+  min-width: 0;
 }
 
 .dash-main {
   display: flex;
   flex-direction: column;
   gap: 20px;
-  min-width: 0; // prevent overflow in grid
+  min-width: 0;
 }
 
 .dash-manifest {
@@ -286,6 +300,7 @@
   max-height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
+  min-width: 0;
 
   @media (max-width: 900px) {
     position: static;
@@ -703,8 +718,10 @@
 .audit-table-wrapper {
   max-height: 420px;
   overflow-y: auto;
+  overflow-x: auto;
   border: 1px solid var(--border-color);
   border-radius: 10px;
+  max-width: 100%;
 }
 
 .audit-table {

src/app/components/chatbot/chatbot.component.html

@@ -3,32 +3,14 @@
   <!-- ── Chat Interface ────────────────────────────────────────────────────── -->
   <div class="chat-layout">
 
-      <!-- Sidebar info -->
-      <aside class="chat-sidebar glass-panel">
-        <h3 class="sidebar-title">RAG Pipeline</h3>
-        <div class="pipeline-step">
-          <span class="step-dot"></span>
-          <span>Angular → n8n Webhook</span>
-        </div>
-        <div class="pipeline-step">
-          <span class="step-dot"></span>
-          <span>n8n → Ollama (Gemma 4)</span>
-        </div>
-        <div class="pipeline-step">
-          <span class="step-dot"></span>
-          <span>n8n → Angular Response</span>
-        </div>
-
-        <button class="btn btn-outline sidebar-clear" (click)="onClearChat()">
-          Clear Chat
-        </button>
-      </aside>
-
       <!-- Chat panel -->
       <div class="chat-panel glass-panel">
         <div class="chat-header">
           <span class="chat-title">PALM OIL <span class="accent-gold">INTELLIGENCE</span></span>
-          <span class="chat-lego">Lego 03 · 06</span>
+          <div class="chat-header-actions">
+            <span class="chat-lego">Lego 03 · 06</span>
+            <button class="btn btn-outline chat-clear-btn" (click)="onClearChat()">Clear Chat</button>
+          </div>
         </div>
 
         <!-- Message list -->
@@ -87,6 +69,6 @@
         <div class="chat-hint">Enter to send · Shift+Enter for new line · Socket → NestJS → n8n</div>
       </div>
 
-    </div>
+  </div>
 
 </div>

src/app/components/chatbot/chatbot.component.scss

@@ -89,71 +89,13 @@
 
 .chat-layout {
   display: flex;
-  gap: 24px;
   height: calc(100vh - 140px);
   min-height: 500px;
-}
-
-// ── Sidebar ────────────────────────────────────────────────────────────────────
-.chat-sidebar {
-  width: 220px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  font-size: 0.8rem;
-}
-
-.sidebar-title {
-  font-size: 0.85rem;
-  color: var(--accent-gold);
-  margin-bottom: 8px;
-}
-
-.pipeline-step {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  color: var(--text-secondary);
-  line-height: 1.4;
-}
-
-.step-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--accent-green);
-  margin-top: 4px;
-  flex-shrink: 0;
-}
-
-.sidebar-endpoint {
-  margin-top: auto;
-  padding: 12px;
-  background: var(--input-bg);
-  border-radius: 10px;
-  border: 1px solid var(--border-color);
-}
-
-.endpoint-label {
-  font-size: 0.65rem;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin-bottom: 4px;
-}
-
-.endpoint-url {
-  font-size: 0.7rem;
-  color: var(--accent-gold);
-  font-family: monospace;
-  word-break: break-all;
-}
 
-.sidebar-clear {
-  width: 100%;
-  font-size: 0.8rem;
-  padding: 10px;
+  @media (max-width: 768px) {
+    height: auto;
+    min-height: unset;
+  }
 }
 
 // ── Chat panel ─────────────────────────────────────────────────────────────────
@@ -163,6 +105,12 @@
   flex-direction: column;
   overflow: hidden;
   padding: 20px;
+  min-width: 0;
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 200px);
+    min-height: 400px;
+  }
 }
 
 .chat-header {
@@ -180,12 +128,23 @@
   letter-spacing: 0.05em;
 }
 
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .chat-lego {
   font-size: 0.65rem;
   color: var(--text-secondary);
   font-family: monospace;
 }
 
+.chat-clear-btn {
+  font-size: 0.75rem;
+  padding: 5px 12px;
+}
+
 // ── Messages ──────────────────────────────────────────────────────────────────
 .message-list {
   flex: 1;

src/styles.scss

@@ -42,6 +42,7 @@ body {
   color: var(--text-primary);
   line-height: 1.6;
   transition: background-color 0.3s ease, color 0.3s ease;
+  overflow-x: hidden;
 }
 
 h1, h2, h3, h4 {