💅 Responsive desing fixes

assets/core/scss/mixins/_inputs.scss

@@ -55,6 +55,13 @@
   @if $size == lg {
     padding: $tutor-spacing-5;
   }
+
+  // Prevent iOS Safari from auto-zooming focused fields and exposing
+  // horizontal overflow on mobile layouts.
+  @media (hover: none) and (pointer: coarse) {
+    font-size: $tutor-font-size-medium;
+    line-height: $tutor-line-height-medium;
+  }
 }
 
 @mixin tutor-textarea($min-height: 92px) {

assets/core/scss/tokens/_zIndex.scss

@@ -1,4 +1,4 @@
-// Design Tokens - z-index 
+// Design Tokens - z-index
 // CSS variables for z-index
 
 // =============================================================================
@@ -9,7 +9,7 @@ $tutor-z-negative: -1;
 $tutor-z-positive: 1;
 $tutor-z-dropdown: 2;
 $tutor-z-level: 0;
-$tutor-z-sidebar: 9;
+$tutor-z-sidebar: 20;
 $tutor-z-header: 10;
 $tutor-z-footer: 10;
 $tutor-z-modal: 25;
@@ -29,4 +29,4 @@ $tutor-z: (
   footer: $tutor-z-footer,
   modal: $tutor-z-modal,
   highest: $tutor-z-highest,
-);
+);

assets/src/js/frontend/learning-area/sidebar.ts

@@ -38,6 +38,7 @@ export const sidebarComponent = ({
     pagesHeight: 0,
     resizing: false,
     collapsed: isCollapsed,
+    sidebarOpen: false,
     courseId: courseId,
     resetModalId: resetModalId,
     resetProgressMutation: null as MutationState<ResetProgressResponse, ResetProgressPayload> | null,
@@ -70,6 +71,14 @@ export const sidebarComponent = ({
       );
     },
 
+    toggleSidebar() {
+      this.sidebarOpen = !this.sidebarOpen;
+    },
+
+    closeSidebar() {
+      this.sidebarOpen = false;
+    },
+
     startResizing(e: MouseEvent) {
       this.resizing = true;
       const startY = e.clientY;

assets/src/js/v3/shared/icons/types.ts

@@ -115,6 +115,7 @@ export const icons = [
   'cross2',
   'crossCircle',
   'crossCircleLine',
+  'crossColorize',
   'crown',
   'crownOutlined',
   'crownRounded',
@@ -212,6 +213,7 @@ export const icons = [
   'inactive',
   'info',
   'info2',
+  'infoColorize',
   'infoFill',
   'infoOctagon',
   'instructor',

assets/src/scss/frontend/components/_quiz-attempts.scss

@@ -4,6 +4,16 @@
 @use '@Core/scss/tokens' as *;
 @use '@Core/scss/mixins' as *;
 
+.tutor-my-quiz-attempts-wrapper .tutor-quiz-attempts {
+  border-radius: $tutor-radius-2xl;
+
+  @include tutor-breakpoint-down(sm) {
+    border: 1px solid $tutor-border-idle;
+    overflow: hidden;
+    margin-top: $tutor-spacing-4;
+  }
+}
+
 .tutor-quiz-attempts-mobile-heading {
   @include tutor-breakpoint-up(sm) {
     display: none;
@@ -277,7 +287,7 @@
         }
 
         &:hover {
-          .tutor-quiz-item-info-title{
+          .tutor-quiz-item-info-title {
             color: $tutor-brand-700;
           }
         }

assets/src/scss/frontend/dashboard/_billing.scss

@@ -2,25 +2,9 @@
 @use '@Core/scss/mixins' as *;
 
 .tutor-billing {
-  &-header {
-    background-color: $tutor-surface-base;
-    border-bottom: 1px solid $tutor-border-idle;
-    padding-block: $tutor-spacing-5;
-
-    @include tutor-breakpoint-down(sm) {
-      border-bottom: none;
-    }
-  }
-
   &-body {
     @include tutor-card-base;
     @include tutor-card-radius(lg);
-    @include tutor-flex(column, flex-start, center);
-    margin-top: $tutor-spacing-9;
-
-    .tutor-tabs-horizontal {
-      width: 100%;
-    }
 
     @include tutor-breakpoint-down(sm) {
       background-color: transparent;
@@ -31,10 +15,23 @@
   }
 
   &-tabs {
-    padding: $tutor-spacing-6;
+    padding: $tutor-spacing-5 $tutor-spacing-6;
+    border-bottom: 1px solid $tutor-border-idle;
+    width: 100%;
+
+    @include tutor-breakpoint-down(sm) {
+      margin-bottom: $tutor-spacing-4;
+    }
 
     &-content {
       width: 100%;
+
+      @include tutor-breakpoint-down(sm) {
+        border: 1px solid $tutor-border-idle;
+        background-color: $tutor-surface-l1;
+        border-radius: $tutor-radius-2xl;
+        margin-top: $tutor-spacing-4;
+      }
     }
 
     @include tutor-breakpoint-down(sm) {
@@ -56,7 +53,6 @@
     width: 100%;
 
     @include tutor-breakpoint-down(sm) {
-      margin-top: $tutor-spacing-4;
       border: 1px solid $tutor-border-idle;
       background-color: $tutor-surface-l1;
       border-radius: $tutor-radius-2xl;
@@ -98,7 +94,9 @@
 
     &-left {
       @include tutor-flex(column, flex-start, center);
+      flex: 1 1 0;
       gap: $tutor-spacing-3;
+      min-width: 0;
 
       .tutor-section-separator-vertical {
         background-color: $tutor-surface-l2-hover;
@@ -108,13 +106,17 @@
 
     &-right {
       @include tutor-flex(column, flex-end, center);
+      flex-shrink: 0;
       gap: $tutor-spacing-2;
-      text-align: right
+      text-align: right;
     }
 
     &-title {
+      @include tutor-flex(row, start, flex-start);
       @include tutor-typography('small', 'medium');
-      @include tutor-flex(row, start, center);
+      @include tutor-text-truncate();
+      min-width: 0;
+      width: 100%;
       gap: $tutor-spacing-2;
 
       ul {
@@ -133,6 +135,11 @@
 
       @include tutor-breakpoint-down(sm) {
         @include tutor-flex(column, flex-start, center);
+        overflow: visible;
+        text-overflow: unset;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
       }
     }
 
@@ -152,15 +159,17 @@
     }
 
     &-payment-method {
-      @extend .tutor-billing-card-id;
-      @include tutor-typography('tiny-2');
-      gap: $tutor-spacing-2;
-      border-radius: $tutor-radius-sm;
-      color: $tutor-text-secondary;
-
       @include tutor-breakpoint-down(sm) {
-        @include tutor-typography('tiny');
-        padding: $tutor-spacing-2;
+        .tutor-badge {
+          font-size: 0;
+          line-height: 0;
+          gap: 0;
+          padding: $tutor-spacing-2;
+
+          img {
+            display: block;
+          }
+        }
       }
     }
 
@@ -200,4 +209,4 @@
       }
     }
   }
-}
+}

assets/src/scss/frontend/dashboard/_certificates.scss

@@ -38,7 +38,6 @@
     gap: $tutor-spacing-1;
     flex: 1 1 0%;
     min-width: 0;
-
   }
 
   &-type {
@@ -52,7 +51,7 @@
   &-title {
     @include tutor-typography('medium', 'medium');
     @include tutor-text-truncate;
-    width: stretch;
+    width: 100%;
   }
 
   &-actions {
@@ -70,4 +69,4 @@
       background-color: $tutor-border-hover;
     }
   }
-}
+}

assets/src/scss/frontend/dashboard/_subscription-history.scss

@@ -26,7 +26,6 @@
 }
 
 .tutor-subscription {
-
   &-history {
     .tutor-billing-card {
       &:hover {

assets/src/scss/frontend/dashboard/layout/_account.scss

@@ -14,6 +14,12 @@
       top: 32px;
     }
 
+    @include tutor-breakpoint-down(sm) {
+      body:has(#wpadminbar) & {
+        top: 0;
+      }
+    }
+
     &-title {
       @include tutor-typography(h4, semibold, primary, heading);
 

assets/src/scss/frontend/dashboard/layout/_header.scss

@@ -217,7 +217,7 @@
       &-menu-wrapper {
         @include tutor-flex(column, stretch, space-between);
         background: $tutor-surface-base;
-        height: 100vh;
+        height: 100%;
       }
 
       &-menu {

assets/src/scss/frontend/dashboard/layout/_profile-pages.scss

@@ -19,7 +19,7 @@ body:has(#wpadminbar) {
   padding-block: $tutor-spacing-5;
   position: sticky;
   top: 0;
-  z-index: $tutor-z-positive;
+  z-index: $tutor-z-header;
   width: 100%;
 
   &-title {

assets/src/scss/frontend/dashboard/pages/_courses.scss

@@ -29,7 +29,7 @@
 		.tutor-dashboard-courses-list {
 			border: none;
 			background: none;
-			margin-top: $tutor-spacing-5;
+			margin-top: $tutor-spacing-4;
 			border-radius: $tutor-radius-2xl;
 		}
 	}

assets/src/scss/frontend/kids/_dashboard.scss

@@ -21,11 +21,26 @@
   .tutor-review-card,
   .tutor-dashboard-home-chart,
   .tutor-dashboard-home-card,
-  .tutor-dashboard-home-sort .tutor-popover-bottom {
+  .tutor-dashboard-home-sort .tutor-popover-bottom,
+  .tutor-subscription-payments-item:hover {
+    @include tutor-kids-shadow;
+  }
+
+  .tutor-billing-card:hover {
     @include tutor-kids-shadow;
+    &:not(:last-of-type) {
+      border-bottom: 1px solid transparent;
+    }
+  }
+
+  .tutor-billing-body {
+    @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm);
   }
 
-  .tutor-progress-card .tutor-progress-card-thumbnail {
+  .tutor-progress-card .tutor-progress-card-thumbnail,
+  .tutor-subscription-overview-card,
+  .tutor-subscription-payments-list,
+  .tutor-subscription-details-alert {
     border-radius: $tutor-radius-3xl;
   }
 
@@ -220,12 +235,17 @@
       gap: $tutor-spacing-5;
     }
 
-    .tutor-dashboard-page-card {
+    .tutor-dashboard-page-card,
+    .tutor-billing-body,
+    .tutor-dashboard-courses-wrapper .tutor-dashboard-courses-card,
+    .tutor-dashboard-lesson-notes .tutor-dashboard-page-card {
       border-radius: 0px;
       box-shadow: none;
     }
 
-    .tutor-dashboard-page-card-header {
+    .tutor-dashboard-page-card-header,
+    .tutor-billing-tabs,
+    .tutor-dashboard-courses-tab {
       margin-bottom: $tutor-spacing-5;
     }
 
@@ -234,12 +254,21 @@
       @include tutor-kids-shadow(false);
     }
 
-    .tutor-dashboard-page-card-body {
+    .tutor-dashboard-page-card-body,
+    .tutor-billing-tabs,
+    .tutor-billing-tabs-content,
+    .tutor-dashboard-courses-card .tutor-dashboard-courses-tab,
+    .tutor-my-quiz-attempts-wrapper .tutor-quiz-attempts {
       @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl);
     }
 
     .tutor-dashboard-page-card-header {
       border-radius: $tutor-radius-6xl;
     }
+
+    .tutor-dashboard-courses-card {
+      padding: 2px 2px 5px 2px;
+      margin: -2px -2px -5px -2px;
+    }
   }
 }