angular.json

@@ -31,7 +31,12 @@
             ],
             "styles": [
               "src/styles.scss"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/assets/styles"
+              ]
+            }
           },
           "configurations": {
             "production": {

src/app/components/expense/expense-form/expense-form.component.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-form-container {
   display: grid;
 
@@ -6,14 +8,14 @@
   }
 }
 
-@media (min-width: 550px) {
+@media (min-width: variables.$mid-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: variables.$wide-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr 1fr;
   }

src/app/components/expense/expense.component.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-container {
   width: 100%;
   display: flex;
@@ -5,7 +7,7 @@
   align-items: center;
 
   mat-card {
-    max-width: 800px;
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }

src/app/components/metadata/metadata.component.html

@@ -3,7 +3,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Categories</p>
+          <div class="tab-text">Categories</div>
           <mat-icon class="example-tab-icon">ballot</mat-icon>
         </div>
       </ng-template>
@@ -14,7 +14,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Merchants</p>
+          <div class="tab-text">Merchants</div>
           <mat-icon class="example-tab-icon">shopping_cart</mat-icon>
         </div>
       </ng-template>
@@ -25,7 +25,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         <div class="metadata-tab">
-          <p>Tags</p>
+          <div class="tab-text">Tags</div>
           <mat-icon class="example-tab-icon">label</mat-icon>
         </div>
       </ng-template>

src/app/components/metadata/metadata.component.scss

@@ -1,5 +1,17 @@
+@use "variables";
+
 .metadata-tab {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
+
+.tab-text {
+  display: none;
+}
+
+@media (min-width: variables.$mid-screen) {
+  .tab-text {
+    display: unset;
+  }
+}

src/assets/styles/variables.scss

@@ -0,0 +1,2 @@
+$mid-screen: 500px;
+$wide-screen: 800px;