Improved responsive styles. Improved focus changes.

cista-front/src/components/BreadCrumb.vue

@@ -2,7 +2,6 @@
   <nav
     class="breadcrumb"
     aria-label="Breadcrumb"
-    tabindex="0"
     @keyup.left.stop="move(-1)"
     @keyup.right.stop="move(1)"
     @focus="move(0)"

cista-front/src/components/FileExplorer.vue

@@ -1,5 +1,5 @@
 <template>
-  <table v-if="props.documents.length || editing" @blur="cursor = null">
+  <table v-if="props.documents.length || editing">
     <thead>
       <tr>
         <th class="selection">
@@ -95,8 +95,9 @@
             <a
               :href="url_for(doc)"
               tabindex="-1"
-              @contextmenu.stop
+              @contextmenu.prevent
               @focus.stop="cursor = doc"
+              @blur="ev => { if (!editing) cursor = null }"
               >{{ doc.name }}</a
             >
             <button
@@ -245,7 +246,8 @@ defineExpose({
     scrolltr = tr
     if (!scrolltimer) {
       scrolltimer = setTimeout(() => {
-        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        if (scrolltr)
+          scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
         scrolltimer = null
       }, 300)
     }
@@ -370,10 +372,10 @@ table .selection {
   text-overflow: clip;
 }
 table .modified {
-  width: 8rem;
+  width: 8em;
 }
 table .size {
-  width: 4rem;
+  width: 5em;
 }
 table .menu {
   width: 1rem;