From 84cb50722509f5c1bd8a7ddedbd92484ee9ef298 Mon Sep 17 00:00:00 2001
From: Saurabh186 <sawrabhsharma1234@gmail.com>
Date: Wed, 1 Apr 2026 19:09:03 +0530
Subject: [PATCH 1/2] fix design

---
 .../create-feature.component.html             | 19 ++++++++++---------
 .../src/app/layout/layout.component.scss      |  2 +-
 .../management/management.component.html      |  4 ++--
 apps/36-blocks/src/styles.scss                |  1 +
 apps/shared/scss/global.scss                  | 13 +++++++++++++
 .../src/lib/no-record-found.component.scss    |  3 +++
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index a591bd17..7635cc6c 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/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
@@ -580,7 +580,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>
@@ -590,7 +590,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) {
@@ -673,7 +673,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"
@@ -712,6 +712,7 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
                     <mat-slide-toggle
                         [formControl]="featureForm.get('serviceDetails')?.at(row.index)?.get('is_enable')"
                         color="primary"
+                        disabled="true"
                     ></mat-slide-toggle>
                 </div>
                 <div class="flex items-center justify-center w-16">
diff --git a/apps/36-blocks/src/app/layout/layout.component.scss b/apps/36-blocks/src/app/layout/layout.component.scss
index 15a92c26..a4d51997 100644
--- a/apps/36-blocks/src/app/layout/layout.component.scss
+++ b/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);
diff --git a/apps/36-blocks/src/app/users/management/management.component.html b/apps/36-blocks/src/app/users/management/management.component.html
index b5afb087..05a28700 100644
--- a/apps/36-blocks/src/app/users/management/management.component.html
+++ b/apps/36-blocks/src/app/users/management/management.component.html
@@ -16,9 +16,9 @@
 
     @if (roleForm.get('feature_id')?.value) {
     <!-- 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 -->
-        <mat-card class="w-[200px] shrink-0 self-start max-md:w-full">
+        <mat-card class="w-[200px] shrink-0 self-start max-xl:w-full">
             <mat-card-header> Settings </mat-card-header>
             <mat-card-content class="!p-2">
                 <proxy-service-list
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 64bb564d..b1a0023b 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -38,6 +38,7 @@ body {
     overflow-y: auto;
     @media (max-width: 768px) {
         overflow-x: auto;
+        padding: 16px;
     }
 }
 
diff --git a/apps/shared/scss/global.scss b/apps/shared/scss/global.scss
index 4bb5cc9e..7021a33a 100644
--- a/apps/shared/scss/global.scss
+++ b/apps/shared/scss/global.scss
@@ -126,3 +126,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;
+        }
+    }
+}
diff --git a/libs/ui/no-record-found/src/lib/no-record-found.component.scss b/libs/ui/no-record-found/src/lib/no-record-found.component.scss
index b02b7580..bffac8f7 100644
--- a/libs/ui/no-record-found/src/lib/no-record-found.component.scss
+++ b/libs/ui/no-record-found/src/lib/no-record-found.component.scss
@@ -7,3 +7,6 @@
         font-weight: normal;
     }
 }
+:host {
+    flex-grow: 1;
+}

From 3e770257f28fe457b06c30737728d8d818265190 Mon Sep 17 00:00:00 2001
From: Saurabh186 <sawrabhsharma1234@gmail.com>
Date: Wed, 1 Apr 2026 19:12:33 +0530
Subject: [PATCH 2/2] remove unsed code

---
 .../app/features/create-feature/create-feature.component.html    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index 8061e6b6..ec6d7188 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
@@ -708,7 +708,6 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
                     <mat-slide-toggle
                         [formControl]="featureForm.get('serviceDetails')?.at(row.index)?.get('is_enable')"
                         color="primary"
-                        disabled="true"
                     ></mat-slide-toggle>
                 </div>
                 <div class="flex items-center justify-center w-16">