From 7e2518e40ede5cc9b1e8dd29483c14bda56e1b5c Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Thu, 7 May 2026 05:54:14 -0600
Subject: [PATCH] ui_migration lint(STYLE) Use --fix to solve 110 problems 3
 left

---
 webapp/src/App.vue                            |  8 +--
 webapp/src/assets/less/theme.less             |  6 +-
 webapp/src/assets/less/variables.less         |  9 +--
 webapp/src/components/appContent.vue          |  4 +-
 .../genericComponents/progressBar.vue         | 65 +++++++++++--------
 .../components/genericComponents/tabIcon.vue  |  2 +-
 .../labThingsComponents/actionLogDisplay.vue  |  3 +-
 .../labThingsComponents/actionProgressBar.vue | 65 +++++++++++--------
 .../labThingsComponents/actionStatusModal.vue |  8 ++-
 .../labThingsComponents/endpointButton.vue    |  3 +-
 .../labThingsComponents/inputFromSchema.vue   | 23 ++++---
 .../tabContentComponents/actionTab.vue        |  1 +
 .../controlComponents/positionControl.vue     | 12 ++--
 .../controlComponents/stageControlButtons.vue |  5 ++
 .../tabContentComponents/loggingContent.vue   |  5 +-
 .../tabContentComponents/powerContent.vue     |  4 +-
 .../scanListComponents/scanCard.vue           |  2 +-
 .../tabContentComponents/scanListContent.vue  |  2 +-
 .../settingsComponents/CSMSettings.vue        |  1 +
 .../tabContentComponents/settingsContent.vue  |  5 +-
 webapp/src/components/ui/matrixDisplay.vue    |  2 +-
 21 files changed, 138 insertions(+), 97 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 29a5faa3..75b37e9b 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -325,7 +325,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "./assets/less/theme.less";
+@import url("./assets/less/theme.less");
 // We override the custom-electron-titlebar z-index
 // UIKit lightbox must be able to draw over the titlebar
 // as it currently always spawns at the root of the DOM
@@ -353,8 +353,7 @@ html {
 }
 
 .control-component {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   scrollbar-gutter: stable;
   width: 300px;
   height: 100%;
@@ -366,8 +365,7 @@ html {
 }
 
 .view-component {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   height: 100%;
   padding: 0;
 }
diff --git a/webapp/src/assets/less/theme.less b/webapp/src/assets/less/theme.less
index 47aa24da..2e8dbcab 100644
--- a/webapp/src/assets/less/theme.less
+++ b/webapp/src/assets/less/theme.less
@@ -52,7 +52,7 @@ h4, .uk-h4 {
 }
 
 .uk-card-body {
-    padding: 20px 16px 8px 16px;
+    padding: 20px 16px 8px;
     width: 240px;
 }
 
@@ -172,8 +172,8 @@ a:hover {
 }
 
 .uk-button-disabled {
-    border: 1px solid #999999 !important;
-    background-color: #cccccc !important;
+    border: 1px solid #999 !important;
+    background-color: #ccc !important;
     color: #919191 !important;
 }
 
diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index a9e80524..5804e1f4 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -49,7 +49,7 @@
 .hook-base-body() {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
 }
 
 //
@@ -187,6 +187,7 @@
         color: @inverse-global-color;
         border-color: @inverse-global-color;
     }
+
     .uk-alert-danger {
         color: @notification-message-danger-color;
         border-color: @notification-message-danger-color
@@ -202,7 +203,6 @@
  * Links
  */
 .hook-inverse() {
-
     .uk-link:hover,
     .uk-button-link:hover,
     a:hover {
@@ -224,6 +224,7 @@
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
+
     .uk-button:hover {
         background-color: @inverse-primary-muted-color;
         color: #fff;
@@ -244,8 +245,8 @@
 
     .uk-button-disabled {
         border: 1px solid @darkened-primary-color !important;
-        background-color: #333333 !important;
-        color: #777777 !important;
+        background-color: #333 !important;
+        color: #777 !important;
     }
 }
 
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index a34b9ffa..29af3e5e 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -246,6 +246,7 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 #component-left {
   width: 100%;
   height: 100%;
@@ -266,8 +267,7 @@ export default {
 #switcher-left-container {
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   height: 100%;
   background-color: rgba(180, 180, 180, 0.1);
   border-width: 0 1px 0 0;
diff --git a/webapp/src/components/genericComponents/progressBar.vue b/webapp/src/components/genericComponents/progressBar.vue
index d76106ab..8d2e5cb6 100644
--- a/webapp/src/components/genericComponents/progressBar.vue
+++ b/webapp/src/components/genericComponents/progressBar.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .progress {
   position: relative;
@@ -49,7 +49,7 @@ export default {
   background-color: rgba(180, 180, 180, 0.15);
   border-radius: 2px;
   background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
+  margin: 0.5rem 0 1rem;
   overflow: hidden;
 }
 
@@ -73,7 +73,7 @@ export default {
   }
 }
 
-.progress .indeterminate:before {
+.progress .indeterminate::before {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -81,11 +81,11 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
-.progress .indeterminate:after {
+.progress .indeterminate::after {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -93,63 +93,74 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
   animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  -webkit-animation-delay: 1.15s;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
   animation-delay: 1.15s;
 }
 
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
 @keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
   }
+
   60% {
     left: 100%;
     right: -90%;
   }
+
   100% {
     left: 100%;
     right: -90%;
   }
 }
-@-webkit-keyframes indeterminate-short {
+
+@keyframes indeterminate {
   0% {
-    left: -200%;
+    left: -35%;
     right: 100%;
   }
+
   60% {
-    left: 107%;
-    right: -8%;
+    left: 100%;
+    right: -90%;
   }
+
   100% {
-    left: 107%;
-    right: -8%;
+    left: 100%;
+    right: -90%;
   }
 }
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
   }
+
   60% {
     left: 107%;
     right: -8%;
   }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
   100% {
     left: 107%;
     right: -8%;
diff --git a/webapp/src/components/genericComponents/tabIcon.vue b/webapp/src/components/genericComponents/tabIcon.vue
index e643d965..098e4a2d 100644
--- a/webapp/src/components/genericComponents/tabIcon.vue
+++ b/webapp/src/components/genericComponents/tabIcon.vue
@@ -96,7 +96,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .tabicon-active {
   color: #fff !important;
diff --git a/webapp/src/components/labThingsComponents/actionLogDisplay.vue b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
index caef925f..38b842aa 100644
--- a/webapp/src/components/labThingsComponents/actionLogDisplay.vue
+++ b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
@@ -105,8 +105,7 @@ export default {
 
 .log-container {
   height: 100%;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: auto;
   background-color: white;
   color: black;
   padding: 0.5em;
diff --git a/webapp/src/components/labThingsComponents/actionProgressBar.vue b/webapp/src/components/labThingsComponents/actionProgressBar.vue
index 244c47c4..68ec01c8 100644
--- a/webapp/src/components/labThingsComponents/actionProgressBar.vue
+++ b/webapp/src/components/labThingsComponents/actionProgressBar.vue
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .in-button {
   position: absolute;
@@ -67,7 +67,7 @@ export default {
   background-color: rgba(180, 180, 180, 0.15);
   border-radius: 2px;
   background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
+  margin: 0.5rem 0 1rem;
   overflow: hidden;
 }
 
@@ -91,7 +91,7 @@ export default {
   }
 }
 
-.progress .indeterminate:before {
+.progress .indeterminate::before {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -99,11 +99,11 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
-.progress .indeterminate:after {
+.progress .indeterminate::after {
   content: "";
   position: absolute;
   background-color: inherit;
@@ -111,63 +111,74 @@ export default {
   left: 0;
   bottom: 0;
   will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
   animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  -webkit-animation-delay: 1.15s;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+  animation-delay: 1.15s;
   animation-delay: 1.15s;
 }
 
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
 @keyframes indeterminate {
   0% {
     left: -35%;
     right: 100%;
   }
+
   60% {
     left: 100%;
     right: -90%;
   }
+
   100% {
     left: 100%;
     right: -90%;
   }
 }
-@-webkit-keyframes indeterminate-short {
+
+@keyframes indeterminate {
   0% {
-    left: -200%;
+    left: -35%;
     right: 100%;
   }
+
   60% {
-    left: 107%;
-    right: -8%;
+    left: 100%;
+    right: -90%;
   }
+
   100% {
-    left: 107%;
-    right: -8%;
+    left: 100%;
+    right: -90%;
   }
 }
+
 @keyframes indeterminate-short {
   0% {
     left: -200%;
     right: 100%;
   }
+
   60% {
     left: 107%;
     right: -8%;
   }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
   100% {
     left: 107%;
     right: -8%;
diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue
index 84ddda6e..b73f93de 100644
--- a/webapp/src/components/labThingsComponents/actionStatusModal.vue
+++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue
@@ -91,13 +91,12 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 #progress-and-cancel-row {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   width: 100%;
 }
@@ -107,16 +106,19 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
+
 #progress-and-cancel-row .not-stretchy {
   flex-grow: 0;
   margin-left: 5px;
   margin-right: 5px;
 }
+
 #status-modal {
   max-height: 90vh; // never exceed 90% of viewport height
   display: flex;
   flex-direction: column;
 }
+
 #status-modal .log-container {
   height: 10em;
 }
diff --git a/webapp/src/components/labThingsComponents/endpointButton.vue b/webapp/src/components/labThingsComponents/endpointButton.vue
index 93ac36a1..98cd631d 100644
--- a/webapp/src/components/labThingsComponents/endpointButton.vue
+++ b/webapp/src/components/labThingsComponents/endpointButton.vue
@@ -46,7 +46,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
+
 a.uk-button-disabled {
   pointer-events: none;
 }
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 47ff8634..f6c2d279 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -425,31 +425,32 @@ export default {
 .input-and-buttons-container {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   width: 100%;
 }
+
 .property-input {
   flex-grow: 1;
   margin-left: 5px;
   margin-right: 5px;
   width: 6em;
 }
-/*Hide standard spinners as it isn't possible to customise the browser ones.*/
+
+/* Hide standard spinners as it isn't possible to customise the browser ones. */
 .numeric-property {
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
+
 .numeric-property::-webkit-outer-spin-button,
 .numeric-property::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 .number-wrapper {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-start;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   flex-grow: 1;
 }
@@ -474,25 +475,31 @@ export default {
   cursor: pointer;
   color: #888;
 }
+
 .dropdown {
   background-color: #fff;
   border: 1px solid #ccc;
   opacity: 1;
 }
+
 .edited {
   background-color: #fff3cd;
 }
+
 @keyframes green-flash {
   0% {
     background-color: #3fda63;
   }
+
   100% {
     background-color: white;
   }
 }
+
 .flash {
   animation: green-flash 0.7s ease;
-  /*Without this background-colour chrome will ignore the animation colour.*/
+
+  /* Without this background-colour chrome will ignore the animation colour. */
   background-color: white;
 }
 </style>
diff --git a/webapp/src/components/tabContentComponents/actionTab.vue b/webapp/src/components/tabContentComponents/actionTab.vue
index 0a4dea66..7ebcf511 100644
--- a/webapp/src/components/tabContentComponents/actionTab.vue
+++ b/webapp/src/components/tabContentComponents/actionTab.vue
@@ -218,6 +218,7 @@ export default {
 .control-component {
   width: 33%;
 }
+
 #log-display {
   height: 20em;
 }
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index f6db90db..89dcecb9 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -176,22 +176,24 @@ export default {
 .input-and-buttons-container {
   display: flex;
   flex-flow: column wrap;
-  justify-content: flex-start;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   width: 100%;
 }
+
 .numeric-setting-line-input {
   flex-grow: 1;
-  margin: 5px 0px;
+  margin: 5px 0;
   width: 5em;
+
   /* Stop Firefox showing input spinners, other
   browsers set with block below */
-  -moz-appearance: textfield;
+  appearance: textfield;
 }
+
 /* Chrome, Safari, Edge, Opera */
 .numeric-setting-line-input::-webkit-outer-spin-button,
 .numeric-setting-line-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+  appearance: none;
 }
 </style>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index b01dfa1a..5e74c25e 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -177,14 +177,17 @@ export default {
   grid-column: 2;
   grid-row: 1;
 }
+
 .dpad-grid #left-button {
   grid-column: 1;
   grid-row: 2;
 }
+
 .dpad-grid #right-button {
   grid-column: 3;
   grid-row: 2;
 }
+
 .dpad-grid #down-button {
   grid-column: 2;
   grid-row: 3;
@@ -194,6 +197,7 @@ export default {
   grid-column: 1;
   grid-row: 5;
 }
+
 .both-controls #focus-in-button {
   grid-column: 3;
   grid-row: 5;
@@ -203,6 +207,7 @@ export default {
   grid-column: 1;
   grid-row: 1;
 }
+
 .focus-only #focus-in-button {
   grid-column: 3;
   grid-row: 1;
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 037cc0ce..0069a931 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -241,12 +241,13 @@ export default {
 @error-bg-color: #fef4f6;
 
 .logging-navbar {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
   margin-bottom: 30px;
   height: 80px;
 }
+
 .logging-entry {
   white-space: break-spaces;
   padding: 0;
@@ -313,9 +314,11 @@ export default {
   background: #888;
   border-radius: 6px;
 }
+
 .more-info-container {
   display: flex;
 }
+
 .more-info {
   color: inherit;
   text-decoration: underline;
diff --git a/webapp/src/components/tabContentComponents/powerContent.vue b/webapp/src/components/tabContentComponents/powerContent.vue
index cc6154fd..26c900eb 100644
--- a/webapp/src/components/tabContentComponents/powerContent.vue
+++ b/webapp/src/components/tabContentComponents/powerContent.vue
@@ -80,7 +80,7 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .container {
   display: flex;
@@ -109,6 +109,6 @@ export default {
 .shutdown-button {
   display: inline;
   text-align: center;
-  margin: 30px 30px 30px 30px;
+  margin: 30px;
 }
 </style>
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
index 4f1999ed..8f448815 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -173,7 +173,7 @@ ul {
   display: block;
   text-align: center;
   list-style-type: none;
-  margin: 5px 0px 10px 0px;
+  margin: 5px 0 10px;
   padding: 0;
 }
 
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index b8ad5de2..b8b85319 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -230,7 +230,7 @@ export default {
 
 <style lang="less" scoped>
 .gallery-navbar {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
 }
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 4ee9adb6..7167d68e 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -36,6 +36,7 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
+
 #mini-stream {
   min-width: 300px;
   max-width: 600px;
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 04ab5dd3..95fe5cb8 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -159,11 +159,10 @@ export default {
 
 <style lang="less" scoped>
 // Custom UIkit CSS modifications
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .settings-nav {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   width: 250px;
   padding: 10px;
   background-color: rgba(180, 180, 180, 0.03);
diff --git a/webapp/src/components/ui/matrixDisplay.vue b/webapp/src/components/ui/matrixDisplay.vue
index 8d40cddf..d0c2249a 100644
--- a/webapp/src/components/ui/matrixDisplay.vue
+++ b/webapp/src/components/ui/matrixDisplay.vue
@@ -94,7 +94,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import "../../assets/less/variables.less";
+@import url("../../assets/less/variables.less");
 
 .matrix-container {
   display: inline-block;