Remove duplicated styling for tabs

It uses the same styling as #admin now share via mixins

app/views/admin/products_v3/product_preview.turbo_stream.haml

@@ -3,7 +3,7 @@
     #product-preview{ "data-controller": "tabs" }
       %h1
         = t("admin.products_page.product_preview.product_preview")
-      %dl.tabs
+      %dl.admin-tabs
         %dd
           %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }
             = t("admin.products_page.product_preview.shop_tab")

app/webpacker/css/admin_v3/components/navigation.scss

@@ -1,11 +1,60 @@
 // Navigation
 //---------------------------------------------------
+
+@mixin menu-display {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin menu-link {
+  a {
+    display: inline-block;
+    padding: 16px 20px;
+    color: $color-9 !important;
+    text-align: center;
+    position: relative;
+    font-size: 14px;
+    font-weight: 600;
+
+    &:hover {
+      color: $red !important;
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        height: 3px;
+        background: $red;
+      }
+    }
+
+    &.active {
+      @extend :hover;
+    }
+  }
+}
+
 .inline-menu {
   margin: 0;
   -webkit-margin-before: 0;
   -webkit-padding-start: 0;
 }
 
+// tabs
+/// use the same styling as #admin-menu via menu-display and menu-link mixins
+dl.admin-tabs {
+  box-shadow: $box-shadow;
+  @include menu-display;
+
+  dd {
+    width: auto;
+    padding: 0;
+    @include menu-link;
+  }
+}
+
 nav.menu {
   ul {
     list-style: none;
@@ -95,33 +144,10 @@ nav.menu {
   }
 
   ul {
-    display: flex;
-    flex-wrap: wrap;
+    @include menu-display;
 
     li {
-      a {
-        display: inline-block;
-        padding: 16px 20px;
-        color: $color-9 !important;
-        text-align: center;
-        position: relative;
-        font-size: 14px;
-        font-weight: 600;
-
-        &:hover {
-          color: $red !important;
-
-          &:after {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 20px;
-            right: 20px;
-            height: 3px;
-            background: $red;
-          }
-        }
-      }
+      @include menu-link;
 
       &.selected a {
         @extend a, :hover;

app/webpacker/css/admin_v3/pages/product_preview.scss

@@ -2,46 +2,6 @@
 @import "../../darkswarm/mixins";
 
 #product-preview {
-  // tabs
-  dl.tabs {
-    box-shadow: $box-shadow;
-    display: flex;
-    flex-wrap: wrap;
-
-    dd {
-      width: auto;
-      padding: 0;
-
-      a {
-        display: inline-block;
-        padding: 16px 20px;
-        color: $color-9 !important;
-        text-align: center;
-        position: relative;
-        font-size: 16px;
-        font-weight: 600;
-
-        &:hover {
-          color: $red !important;
-
-          &:after {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 20px;
-            right: 20px;
-            height: 3px;
-            background: $red;
-          }
-        }
-
-        &.active {
-          @extend a, :hover;
-        }
-      }
-    }
-  }
-
   // The frontend css is base on foundation-sites https://github.com/foundation/foundation-sites
   // Below we copied the sections that are relevant to the product preview modal
 
@@ -122,7 +82,8 @@
 
   // from foundation-sites/scss/foundations/components/_grid.scss
   @media only screen and (min-width: 64.0625em) {
-    .column, .columns {
+    .column,
+    .columns {
       position: relative;
       padding-left: 0.9375rem;
       padding-right: 0.9375rem;