fix: make routing table scrollable on smaller screens (#140)

Previously, the routing table content would get cut off on smaller
screens. Now, it becomes scrollable when needed, ensuring all data
remains accessible.

Improved the `right-bar-toggle-button` hover effect by adding a smooth
transition and slight zoom effect for better UX.


![image](https://github.com/user-attachments/assets/d8c93f2c-0198-4099-aec6-20da5c28c53b)

Author: pgallino

src/graphics/right_bar.ts

@@ -140,6 +140,8 @@ export function createRoutingTable(
   deviceId: number,
 ) {
   const container = document.createElement("div");
+  const tableWrapper = document.createElement("div");
+  tableWrapper.classList.add("table-wrapper");
   const tableClasses = ["right-bar-table", "hidden", "toggle-table"];
   const buttonClass = "right-bar-toggle-button";
 
@@ -150,8 +152,9 @@ export function createRoutingTable(
   table.classList.add(...tableClasses);
   const button = createToggleButton(title, buttonClass, table);
 
+  tableWrapper.appendChild(table);
   container.appendChild(button);
-  container.appendChild(table);
+  container.appendChild(tableWrapper);
   return container;
 }
 

src/styles/right-bar-buttons.css

@@ -50,14 +50,22 @@
   width: 100%;
   box-sizing: border-box;
   position: relative; /* Needed for positioning arrow */
+  transition:
+    background-color 0.3s ease,
+    transform 0.2s ease; /* Smooth hover effect */
+}
+
+.right-bar-toggle-button:hover {
+  background-color: #162a6d; /* Darker blue on hover */
+  transform: scale(1.02); /* Slight zoom effect */
 }
 
 /* 🔹 Dropdown arrow styling */
 .right-bar-toggle-button::after {
   content: ""; /* Adds an empty element for the arrow */
   display: inline-block;
   position: absolute;
-  right: 2vw; /* Positions the arrow */
+  right: 1vw; /* Positions the arrow */
   width: 0;
   height: 0;
   border-left: 0.6rem solid transparent; /* Creates arrow effect */

src/styles/table.css

@@ -1,3 +1,10 @@
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  display: block;
+  max-width: 100%;
+}
+
 /* table.css - Table in the sidebar */
 .right-bar-table {
   width: 100%; /* Ensures the container takes full width */