Fix playlist page layout and silence auto-connect toast

- Fix playlist container height to account for bottom navbar
- Align sidebar and main content headers with matching structure
- Add playlist count subtitle to sidebar header
- Make serial terminal auto-connect silent (no toast on page load)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/PlaylistsPage.tsx

@@ -474,7 +474,7 @@ export function PlaylistsPage() {
   }
 
   return (
-    <div className="flex flex-col w-full max-w-5xl mx-auto gap-4 sm:gap-6 py-3 sm:py-6 px-0 sm:px-4 h-[calc(100dvh-7rem)] overflow-hidden">
+    <div className="flex flex-col w-full max-w-5xl mx-auto gap-4 sm:gap-6 py-3 sm:py-6 px-0 sm:px-4 h-[calc(100dvh-11rem)] overflow-hidden">
       {/* Page Header */}
       <div className="space-y-0.5 sm:space-y-1 shrink-0 pl-1">
         <h1 className="text-xl font-semibold tracking-tight">Playlists</h1>
@@ -490,7 +490,10 @@ export function PlaylistsPage() {
         {/* Playlists Sidebar */}
         <aside className="w-full lg:w-64 shrink-0 bg-card border rounded-lg flex flex-col max-h-48 lg:max-h-none">
           <div className="flex items-center justify-between px-3 py-2.5 border-b shrink-0">
-            <h2 className="text-lg font-semibold">My Playlists</h2>
+            <div>
+              <h2 className="text-lg font-semibold">My Playlists</h2>
+              <p className="text-sm text-muted-foreground">{playlists.length} playlist{playlists.length !== 1 ? 's' : ''}</p>
+            </div>
             <Button
               variant="ghost"
               size="icon"
@@ -564,7 +567,7 @@ export function PlaylistsPage() {
         {/* Main Content */}
         <main className="flex-1 bg-card border rounded-lg flex flex-col overflow-hidden min-h-0 relative">
           {/* Header */}
-          <header className="flex items-center justify-between px-4 py-3 border-b shrink-0">
+          <header className="flex items-center justify-between px-3 py-2.5 border-b shrink-0">
             <div className="flex items-center gap-3 min-w-0">
               <div className="min-w-0">
                 <h2 className="text-lg font-semibold truncate">

frontend/src/pages/TableControlPage.tsx

@@ -262,9 +262,9 @@ export function TableControlPage() {
     }
   }
 
-  const handleSerialConnect = async () => {
+  const handleSerialConnect = async (silent = false) => {
     if (!selectedSerialPort) {
-      toast.error('Please select a serial port')
+      if (!silent) toast.error('Please select a serial port')
       return
     }
     setSerialLoading(true)
@@ -272,11 +272,11 @@ export function TableControlPage() {
       await apiClient.post('/api/debug-serial/open', { port: selectedSerialPort })
       setSerialConnected(true)
       addSerialHistory('resp', `Connected to ${selectedSerialPort}`)
-      toast.success(`Connected to ${selectedSerialPort}`)
+      if (!silent) toast.success(`Connected to ${selectedSerialPort}`)
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : 'Unknown error'
       addSerialHistory('error', `Failed to connect: ${errorMsg}`)
-      toast.error('Failed to connect to serial port')
+      if (!silent) toast.error('Failed to connect to serial port')
     } finally {
       setSerialLoading(false)
     }
@@ -371,10 +371,10 @@ export function TableControlPage() {
     fetchMainConnectionStatus()
   }, [])
 
-  // Auto-connect to the main connection port
+  // Auto-connect to the main connection port (silent - no toast)
   useEffect(() => {
     if (mainConnectionPort && selectedSerialPort === mainConnectionPort && !serialConnected && !serialLoading) {
-      handleSerialConnect()
+      handleSerialConnect(true)
     }
   }, [mainConnectionPort, selectedSerialPort])