refactor: update deprecated scss nesting

Author: sleidig

src/app/child-dev-project/attendance/attendance-manager/attendance-manager.component.scss

@@ -4,8 +4,8 @@
 @use "typography/custom-typography";
 
 .cards-wrapper {
-  @include grid-layout.adaptive($min-block-width: 250px);
   margin-top: sizes.$large;
+  @include grid-layout.adaptive($min-block-width: 250px);
 }
 
 .mat-mdc-card[disabled] {

src/app/core/common-components/entities-table/list-paginator/list-paginator.component.scss

@@ -8,18 +8,21 @@ $slider-padding-all: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  justify-content: flex-start;
+  background-color: white;
+
   @media all and (max-width: $approx-width-paginator) {
     flex-direction: column-reverse;
     align-items: flex-start;
   }
-  justify-content: flex-start;
-  background-color: white;
 }
 
 .slider {
   padding-left: sizes.$regular;
+  font-size: small;
+
   @media all and (max-width: $approx-width-paginator) {
     padding-bottom: sizes.$regular;
   }
-  font-size: small;
 }

src/app/core/dashboard/dashboard/dashboard.component.scss

@@ -10,9 +10,10 @@ $max-screen-width: $min-widget-width + sizes.$margin-main-view-right +
 $widget-height: 430px;
 
 :host {
-  @include grid-layout.adaptive($min-widget-width, $max-screen-width);
   /* Make all rows be equal in height */
   grid-auto-rows: $widget-height;
+
+  @include grid-layout.adaptive($min-widget-width, $max-screen-width);
 }
 
 .grid-item {

src/app/core/ui/ui/ui.component.scss

@@ -105,11 +105,11 @@ mat-sidenav-container {
   place-items: center;
   min-width: fit-content;
 
+  box-sizing: border-box;
+
   &:not(:last-child) {
     border-right: solid 1px rgba(0, 0, 0, 0.12);
   }
-
-  box-sizing: border-box;
 }
 
 .info-icon {

src/app/features/dashboard-widgets/progress-dashboard-widget/edit-progress-dashboard/edit-progress-dashboard.component.scss

@@ -20,11 +20,12 @@
 }
 
 .title-field {
+  width: 90%;
+  min-width: 0;
+
   input {
     font-size: 32px;
   }
-  width: 90%;
-  min-width: 0;
 }
 
 .header-field {

src/index.html

@@ -31,6 +31,7 @@
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#1976d2" />
 
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-touch-fullscreen" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Aam Digital" />

src/styles/mixins/_grid-layout.scss

@@ -11,8 +11,9 @@
 @mixin adaptive($min-block-width, $max-screen-width: $min-block-width) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($min-block-width, 1fr));
+  grid-gap: sizes.$large;
+
   @media screen and (max-width: $max-screen-width) {
     grid-template-columns: 1fr;
   }
-  grid-gap: sizes.$large;
 }