Add additional margin to prevent focus ring overlap

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 1d2ccdd0ee0c3f9a9b796128989d7f3e352aea78..1d11709b936aeee87a69a1bbf6d08eaeb4f910b0 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -9,7 +9,12 @@
         <CustomButton :iconPath="mdilPlusCircle" label="New Note" />\r
       </RouterLink>\r
       <!-- Menu -->\r
-      <CustomButton :iconPath="mdilMenu" label="Menu" @click="toggleMenu" />\r
+      <CustomButton\r
+        class="ml-1"\r
+        :iconPath="mdilMenu"\r
+        label="Menu"\r
+        @click="toggleMenu"\r
+      />\r
       <PrimeMenu ref="menu" :model="menuItems" :popup="true" />\r
     </div>\r
   </nav>\r

diff --git a/client/views/Home.vue b/client/views/Home.vue
index c94e2c7cdd46387bf85b8a7530f0af815e202029..f866b98fe2cffe299379f9a0355953ca68eae793 100644 (file)
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -10,7 +10,7 @@
         >
           RECENTLY MODIFIED
         </p>
-        <RouterLink v-for="note in notes" :to="note.href">
+        <RouterLink v-for="note in notes" :to="note.href" class="mb-1">
           <CustomButton :label="note.title" />
         </RouterLink>
       </div>

diff --git a/client/views/Note.vue b/client/views/Note.vue
index 7b458406ca960f790e7d99cdf1efe5a52e622b00..3a40f55fbce2e72c1f0230f7acbf7a849a091c0d 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -35,6 +35,7 @@
         />
         <CustomButton
           v-if="canModify"
+          class="ml-1"
           :iconPath="mdilPencil"
           label="Edit"
           @click="editHandler"
@@ -47,6 +48,7 @@
           @click="cancelHandler"
         />
         <CustomButton
+          class="ml-1"
           :iconPath="mdilContentSave"
           label="Save"
           @click="saveHandler"