fix design

apps/36-blocks/src/app/features/create-feature/create-feature.component.html

@@ -42,7 +42,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
     @if (!isEditMode) {
     <mat-stepper
         #stepper
-        class="rounded-lg grow mat-stepper-starched shadow-sm"
+        class="rounded-lg grow stepper-starched shadow-sm"
         labelPosition="bottom"
         [animationDuration]="0"
         [linear]="true"
@@ -190,7 +190,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Billable Metrics / Items</ng-template>
             <div class="flex flex-col justify-between gap-4 h-full">
                 <ng-container *ngTemplateOutlet="billableMetrics"></ng-container>
-                <div class="flex items-end justify-end pt-4 border-t border-outline/20">
+                <div class="flex items-end justify-end pt-4">
                     <button type="button" matButton="filled" (click)="getPaymentDetailsFormData()" matStepperNext>
                         Next<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
                             >navigate_next</mat-icon
@@ -203,7 +203,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Payment Details</ng-template>
             <div class="flex flex-col justify-between gap-4 h-full">
                 <ng-container *ngTemplateOutlet="paymentDetails"></ng-container>
-                <div class="flex items-end justify-end pt-4 border-t border-outline/20">
+                <div class="flex items-end justify-end pt-4">
                     <button type="button" matButton="filled" (click)="getCreatePlansFormData()" matStepperNext>
                         skip<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
                             >navigate_next</mat-icon
@@ -217,7 +217,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Create Plan</ng-template>
             <div class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="createPlan"></ng-container>
-                <div class="flex items-end justify-end pt-4 border-t border-outline/20">
+                <div class="flex items-end justify-end pt-4">
                     <button type="button" matButton="filled" (click)="createPlanAndGenerateSnippet()">
                         Create Plan & Generate Snippet
                     </button>
@@ -232,7 +232,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
                     <ng-container *ngTemplateOutlet="plansOverview"></ng-container>
                 </form>
                 <ng-container *ngTemplateOutlet="designAndCode"></ng-container>
-                <div class="flex justify-between items-center mt-6 pt-4 border-t border-outline/20">
+                <div class="flex justify-between items-center mt-6 pt-4">
                     <ng-container *ngTemplateOutlet="preview"></ng-container>
                     @if (createUpdateObject$ | async; as createUpdateObject) {
                     <button
@@ -253,7 +253,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Design & code</ng-template>
             <div class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="designAndCode"></ng-container>
-                <div class="flex justify-between items-center mt-6 pt-4 border-t border-outline/20">
+                <div class="flex justify-between items-center mt-6 pt-4">
                     <ng-container *ngTemplateOutlet="preview"></ng-container>
                     @if (createUpdateObject$ | async; as createUpdateObject) {
                     <button
@@ -576,7 +576,7 @@ <h3 class="template-card__title">Custom Mapping</h3>
 </ng-template>
 
 <ng-template #configureMethodFormContent let-serviceForm="serviceForm">
-    <div class="flex flex-col grow card-with-header" [class.border]="!serviceForm">
+    <div class="flex flex-col grow" [class]="!serviceForm ? 'border card-with-header' : ''">
         @if ((selectedMethod | async)?.method_services; as methodServices) { @if (!serviceForm) {
         <div class="card-with-header--header">
             <mat-icon class="!text-base !w-4 text-color">tune</mat-icon>
@@ -586,7 +586,7 @@ <h3 class="template-card__title">Custom Mapping</h3>
             >
         </div>
         } @if (serviceForm ?? featureForm.get('serviceDetails')?.at(selectedServiceIndex); as formToUse) {
-        <div class="bg-color flex flex-col gap-3" [class.p-4]="!serviceForm">
+        <div class="flex flex-col gap-3" [class]="!serviceForm ? 'p-4 bg-color' : ''">
             <form [formGroup]="formToUse" class="flex flex-col gap-1">
                 @if (methodServices?.[selectedServiceIndex]?.requirements; as requirements) { @if
                 ((formToUse.controls.requirements.controls | keyvalue)?.length) {
@@ -669,7 +669,7 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
 
 <ng-template #createBlockConfigureMethodTemplate>
     @if (selectedMethod | async; as method) {
-    <div class="flex flex-col gap-3 my-6 grow text-color">
+    <div class="flex flex-col gap-3 mb-6 grow text-color">
         @if (configureMethodsTableData.length === 0) {
         <div
             class="flex flex-col items-center justify-center py-10 gap-2 rounded-xl border border-dashed border-color bg-color"

apps/36-blocks/src/app/layout/layout.component.scss

@@ -14,7 +14,7 @@
     @media (max-width: 992px) {
         .mat-drawer-content {
             position: fixed;
-            z-index: 999;
+            z-index: 999999;
             top: 0;
             bottom: 0;
             background: var(--mat-sys-surface);

apps/36-blocks/src/app/users/management/management.component.html

@@ -45,7 +45,7 @@
     </div>
 
     <!-- Main Content Area -->
-    <div class="flex max-md:flex-col gap-6 grow min-h-[400px] overflow-hidden">
+    <div class="flex max-xl:flex-col gap-6 grow min-h-[400px]">
         <!-- Sidebar Nav -->
         <proxy-service-list
             class="w-[200px] shrink-0 self-start max-md:w-full"

apps/36-blocks/src/styles.scss

@@ -38,6 +38,7 @@ body {
     overflow-y: auto;
     @media (max-width: 768px) {
         overflow-x: auto;
+        padding: 16px;
     }
 }
 

apps/shared/scss/global.scss

@@ -129,3 +129,16 @@ markdown pre {
         $scrollbarTrackRadius: 4px
     );
 }
+.stepper-starched {
+    .mat-horizontal-stepper-header-container {
+        padding: 24px;
+    }
+    @media screen and (max-width: 768px) {
+        .mat-horizontal-stepper-header-container {
+            padding: 8px;
+        }
+        .mat-horizontal-content-container {
+            padding: 0 8px 8px 8px;
+        }
+    }
+}

libs/ui/no-record-found/src/lib/no-record-found.component.scss

@@ -7,3 +7,6 @@
         font-weight: normal;
     }
 }
+:host {
+    flex-grow: 1;
+}