Attempt to fix column focus bug

src/components/columns.jsx

@@ -107,6 +107,18 @@ function Columns() {
           states.showShortcutsSettings = true;
         }
       }}
+      onFocus={() => {
+        // Get current focused column
+        const currentFocusedColumn =
+          document.activeElement.closest('#columns > *');
+        if (currentFocusedColumn) {
+          // Remove focus classes from all columns
+          // Add focus class to current focused column
+          document.querySelectorAll('#columns > *').forEach((column) => {
+            column.classList.toggle('focus', column === currentFocusedColumn);
+          });
+        }
+      }}
     >
       {components}
     </div>

src/utils/focus-deck.js

@@ -2,8 +2,25 @@ const focusDeck = () => {
   let timer = setTimeout(() => {
     const columns = document.getElementById('columns');
     if (columns) {
+      // Focus focused column
+      const focusedColumn = columns.querySelector('.deck-container.focus');
+      if (focusedColumn) {
+        focusedColumn.focus();
+      } else {
+        // Focus first column within viewport
+        const firstVisibleColumn = columns
+          .querySelectorAll('.deck-container')
+          .find((column) => {
+            const columnRect = column.getBoundingClientRect();
+            return columnRect.left >= 0;
+          });
+        if (firstVisibleColumn) {
+          firstVisibleColumn.focus();
+        } else {
           // Focus first column
           columns.querySelector('.deck-container')?.focus?.();
+        }
+      }
     } else {
       const modals = document.querySelectorAll('#modal-container > *');
       if (modals?.length) {