route lengths, edit saved routs, ui visibility toggle

style.css

@@ -4,10 +4,29 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-#ui-container {
+#ui-toggle {
     position: absolute;
     top: 20px;
     left: 20px;
+    z-index: 100; /* Above UI container */
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: white;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    font-size: 20px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+}
+
+#ui-container {
+    position: absolute;
+    top: 70px; /* Moved down to make room for toggle */
+    left: 20px;
     width: 280px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
@@ -15,8 +34,19 @@ body {
     padding: 20px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.15);
     user-select: none;
-    max-height: 90vh;
+    max-height: 80vh;
     overflow-y: auto;
+    
+    /* Animation for toggling */
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: top left;
+}
+
+/* Class to hide UI */
+#ui-container.hidden {
+    transform: scale(0.95);
+    opacity: 0;
+    pointer-events: none;
 }
 
 .header h2 { margin: 0 0 5px 0; font-size: 18px; color: #333; }
@@ -52,10 +82,17 @@ button:hover { opacity: 0.8; }
     padding: 10px;
     border-radius: 6px;
     display: flex;
+    flex-wrap: wrap; /* Allow wrapping for buttons */
     justify-content: space-between;
     align-items: center;
     font-size: 14px;
+    gap: 5px;
 }
+#route-list li span {
+    flex-grow: 1;
+    font-weight: 500;
+}
+
 #route-list li button {
     flex: 0;
     margin-left: 10px;
@@ -64,3 +101,12 @@ button:hover { opacity: 0.8; }
     background: #fee2e2;
     color: #991b1b;
 }
+
+.btn-icon {
+    flex: 0 0 auto;
+    padding: 4px 8px;
+    font-size: 12px;
+    margin-left: 2px;
+}
+.btn-edit { background: #dbeafe; color: #1e40af; }
+.btn-del { background: #fee2e2; color: #991b1b; }