restruct: updated sass version and rules

src/components/TrainsView/TrainTable.vue

@@ -19,7 +19,7 @@
         >)
       </div>
 
-      <transition-group name="list-anim" tag="ul">
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
         <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
       </transition-group>
     </div>
@@ -93,8 +93,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/animations.scss';
+@use '../../styles/responsive';
+@use '../../styles/animations';
 
 .train-table {
   height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
   text-align: center;