✨ Make Dashboard Responsive for Mobile & Tablet

toothmap_frontend/src/App.jsx

@@ -2,8 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import axios from 'axios';
 import { UploadCloud, Activity, Loader2, ScanLine } from 'lucide-react';
 
-// Leave empty for relative routing (needed for Hugging Face Spaces subdomains)
-const API_BASE = "";
+const API_BASE = "http://127.0.0.1:8000";
 
 const MODES = [
   { id: 'pipeline_yolo',  label: '🦷 Full Pipeline (YOLO + FDI)',  desc: 'Detect → FDI label + per-tooth segmentation mask' },
@@ -163,9 +162,9 @@ export default function App() {
         </h1>
       </header>
 
-      <main className="flex-1 flex overflow-hidden">
+      <main className="flex-1 flex flex-col lg:flex-row overflow-auto lg:overflow-hidden">
         {/* Sidebar */}
-        <aside className="w-80 bg-zinc-900/40 border-r border-zinc-800/50 p-5 flex flex-col gap-4">
+        <aside className="w-full lg:w-80 flex-shrink-0 bg-zinc-900/40 border-b lg:border-b-0 lg:border-r border-zinc-800/50 p-5 flex flex-col gap-4 overflow-y-auto">
           <div className="space-y-2">
             <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">AI Mode</p>
             {MODES.map(m => (
@@ -230,7 +229,7 @@ export default function App() {
         </aside>
 
         {/* Canvas */}
-        <section className="flex-1 bg-zinc-950/80 p-8 flex items-center justify-center overflow-auto">
+        <section className="flex-1 bg-zinc-950/80 p-4 lg:p-8 flex items-center justify-center overflow-auto min-h-[50vh] relative">
           {!imagePreview ? (
             <div className="text-center text-zinc-600">
               <UploadCloud size={64} className="mx-auto opacity-20 mb-4" />