components(form-row): fix CSS specificity

ozgurg · Mar 30, 2024 · 935cde1 · 935cde1
1 parent ac633e7
commit 935cde1
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/components/form-row.vue b/components/form-row.vue
@@ -2,7 +2,7 @@
     <v-row
         :class="{'horizontal': props.direction === 'horizontal'}"
         no-gutters=""
-        class="flex-column flex-sm-row">
+        class="form-row flex-column flex-sm-row">
         <v-col>
             <template v-if="props.label">
                 <label>
@@ -33,7 +33,7 @@ const props = defineProps({
 <style lang="scss" scoped="">
 @import "~vuetify/src/components/VTextField/_variables.scss";
 
-.row {
+.form-row {
     --vh-form-row-gap: .375rem;
     --vh-form-row-label-col-width: 100%;
     --vh-form-row-label-justify-content: flex-start;
@@ -45,7 +45,7 @@ const props = defineProps({
             --vh-form-row-label-justify-content: flex-end
         }
     }
-    .col:first-child {
+    & > .col:first-child {
         flex: 0 0 var(--vh-form-row-label-col-width);
         max-width: var(--vh-form-row-label-col-width);
         label {