Skip to content

Divyanshu/Saurabh | Design issue fix #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Saurabh186 merged 5 commits into from
Mar 31, 2026
Merged

Divyanshu/Saurabh | Design issue fix #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c0946f0
fix side bar select
Saurabh186 Mar 31, 2026
c356d89
Merge branch 'P0080-clean' of https://github.com/Walkover-Web-Solutio…
dvCodeWorld Mar 31, 2026
ce694e5
refactor: standardize card styling and remove redundant CSS classes
dvCodeWorld Mar 31, 2026
e86949b
fix sidebar
Saurabh186 Mar 31, 2026
d43669c
Merge branch 'P0080-clean' of https://github.com/Walkover-Web-Solutio…
dvCodeWorld Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/36-blocks/src/app/create-project/create-project.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app-content flex justify-center h-screen">
<div class="flex justify-center h-screen">
<div class="w-3/4 border rounded-8 bg-gray" labelPosition="bottom">
@if (currentstep === 1) {
<div
Expand Down
128 changes: 61 additions & 67 deletions apps/36-blocks/src/app/features/create-feature/create-feature.component.html
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 0 additions & 15 deletions apps/36-blocks/src/app/features/create-feature/create-feature.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.code-snippet-view {
transition: min-height 0.2s linear;
min-width: 500px;
max-width: 800px;
}
Comment on lines 3 to 4
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing the max-width constraint from .code-snippet-view might cause content to stretch too wide on larger screens. Consider if this was intentional or if a different max-width value would be more appropriate to maintain readability.


.active {
Expand Down Expand Up @@ -147,20 +146,6 @@
color: var(--color-common-primary) !important;
}

.preview-input-field {
input {
border: none;
outline: none;
background: transparent;
width: 100%;

&::placeholder {
color: var(--color-common-text);
opacity: 1;
}
}
}

.custom-toggle-group {
display: inline-flex;
border-radius: 8px;
Expand Down
18 changes: 5 additions & 13 deletions apps/36-blocks/src/app/features/feature/feature.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@if (loading$ | async; as loading) {
<div class="app-content flex flex-col">
<div class="flex flex-col">
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The app-content class has been removed from the main container div. Ensure this doesn't break the component's layout within the application context, especially regarding padding, margins, or other layout properties that might have been provided by this class.

@if (loading.dataLoading && (hasSomeFeatures$ | async) === null) { <proxy-loader></proxy-loader> }

<!-- Action Bar -->
Expand Down Expand Up @@ -60,7 +60,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-300">Name</th>
<td mat-cell *matCellDef="let element" data-label="Name">
@if (!loading.dataLoading) {
<span class="font-semibold text-sm text-color">{{ element.name }}</span>
<span>{{ element.name }}</span>
} @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
Expand All @@ -76,7 +76,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
<span
[matTooltip]="element.reference_id"
matTooltipPosition="above"
class="cursor-pointer font-mono text-xs bg-[var(--color-common-chip-bg)] px-2 py-0.5 rounded-4 [color:var(--color-common-text-2)] min-w-[150px]"
class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]"
>
{{
element.reference_id?.length > 15
Expand All @@ -102,11 +102,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Method</th>
<td mat-cell *matCellDef="let element" data-label="Method">
@if (!loading.dataLoading) { @if (element.method?.name) {
<span
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
>
{{ element.method?.name }}
</span>
{{ element.method?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
Expand All @@ -118,11 +114,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="width-md-200">Type</th>
<td mat-cell *matCellDef="let element" data-label="Type">
@if (!loading.dataLoading) { @if (element.feature?.name) {
<span
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
>
{{ element.feature?.name }}
</span>
{{ element.feature?.name }}
} } @else {
<ng-container [ngTemplateOutlet]="loadingRef"></ng-container>
}
Expand Down
17 changes: 8 additions & 9 deletions apps/36-blocks/src/app/layout/layout.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
<div class="flex w-full h-full" [class.collapsed-sidebar]="!(isSideNavOpen | async)">
<div
class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0"
class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
[class.mat-drawer-toggle-btn-hover]="isSideNavOpen | async"
[class]="!(isSideNavOpen | async) ? 'overflow-hidden !w-[56px]' : 'w-[246px]'"
[class]="!(isSideNavOpen | async) ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
>
<div
class="flex items-center mat-drawer-header"
[class]="!(isSideNavOpen | async) ? 'flex-col gap-2 mt-3' : ''"
>
<div class="flex items-center py-2" [class]="!(isSideNavOpen | async) ? 'flex-col gap-2' : ''">
<div
class="flex items-center grow gap-2 mat-drawer-header-title px-4"
#clientsMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="clientsMenu"
>
@if (!(isSideNavOpen | async)) {
<mat-icon class="mat-icon-22">apps</mat-icon>
}
<div
class="flex items-center gap-x-1 mat-drawer-header-subtitle cursor-pointer"
[class.hidden]="!(isSideNavOpen | async)"
Expand Down Expand Up @@ -102,7 +101,7 @@
</mat-slide-toggle>
</div>
}
<button matButton [matMenuTriggerFor]="menu">
<button class="!rounded-lg" matButton [matMenuTriggerFor]="menu">
<div class="flex items-center">
@if (user.photoURL) {
<img [src]="user.photoURL" alt="No Image" class="w-7 h-7 rounded-full" loading="lazy" />
Expand All @@ -114,7 +113,7 @@
<div class="flex flex-col" style="width: 140px">
<h6 [class.hidden]="!(isSideNavOpen | async)" class="username m-0">{{ user.displayName }}</h6>
</div>
<mat-icon class="mx-1 text-secondary material-icons-outlined">keyboard_arrow_up</mat-icon>
<mat-icon class="mx-1 material-icons-outlined">keyboard_arrow_up</mat-icon>
</div>
</button>
<mat-menu #menu="matMenu" class="profile-menu ml-1">
Expand All @@ -126,7 +125,7 @@ <h4 class="m-0 py-2 px-6 text-dark font-medium">{{ user.displayName }}</h4>
</div>
}
</div>
<div class="flex-1 flex flex-col overflow-hidden">
<div class="flex-1 flex flex-col app-content">
Copy link
Copy Markdown

@windsurf-bot windsurf-bot bot Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overflow-hidden property was removed from the content container. This might cause content to overflow its container when there's a lot of data. Consider adding appropriate overflow handling to the app-content class.

<!-- Content::START -->
<router-outlet></router-outlet>
<div id="ChatbotContainer" class="h-screen w-full"></div>
Expand Down
5 changes: 3 additions & 2 deletions apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
<a
mat-list-item
[routerLink]="[item.route]"
routerLinkActive="active-list-item"
routerLinkActive="mdc-list-item--activated"
[matTooltipPosition]="'right'"
[matTooltip]="isSideNavOpen() ? item.label : ''"
[style.padding]="isSideNavOpen() ? '10px' : ''"
>
<mat-icon matListIcon aria-hidden="false">{{ item.icon }}</mat-icon>
<mat-icon matListIcon [class.mr-3]="!isSideNavOpen()" aria-hidden="false">{{ item.icon }}</mat-icon>
<span [class.hidden]="isSideNavOpen()" matLine>{{ item.label }}</span>
</a>
}
Expand Down
9 changes: 5 additions & 4 deletions apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:host {
a.active-list-item::before {
background-color: var(--mat-list-list-item-hover-state-layer-color, var(--mat-sys-on-surface));
opacity: var(--mat-list-list-item-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));
.service-list {
.mat-mdc-list-item {
border-radius: 8px !important;
height: 42px !important;
margin-bottom: 2px;
}
}
13 changes: 4 additions & 9 deletions apps/36-blocks/src/app/logs/log/log.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app-content flex flex-col">
<div class="flex flex-col">
@if (isLoading$ | async) {
<proxy-loader></proxy-loader>
}
Expand Down Expand Up @@ -217,20 +217,15 @@
<ng-container matColumnDef="user_ip">
<th mat-header-cell *matHeaderCellDef mat-sort-header>User IP</th>
<td mat-cell *matCellDef="let element" data-label="User IP">
<span
class="font-mono text-xs bg-[var(--color-common-chip-bg)] px-2 py-0.5 rounded-4 [color:var(--color-common-text-2)]"
>{{ element.user_ip }}</span
>
<span class="font-mono text-xs px-2 py-0.5 rounded-4">{{ element.user_ip }}</span>
</td>
</ng-container>

<!-- Endpoint Column -->
<ng-container matColumnDef="endpoint">
<th mat-header-cell *matHeaderCellDef>Endpoint</th>
<td mat-cell *matCellDef="let element" class="w-b-hyphens" data-label="Endpoint">
<span class="font-mono text-xs [color:var(--color-common-text-2)]">{{
element.endpoint
}}</span>
<span class="font-mono text-xs">{{ element.endpoint }}</span>
</td>
</ng-container>

Expand Down Expand Up @@ -267,7 +262,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>Response time</th>
<td mat-cell *matCellDef="let element" data-label="Response time">
@if (element.response_time != null) {
<span class="text-sm [color:var(--color-common-text-2)]"
<span class="text-sm"
>{{ element.response_time }}<span class="text-xs text-grey ml-0.5">ms</span></span
>
}
Expand Down
2 changes: 1 addition & 1 deletion apps/36-blocks/src/app/register/register.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app-content flex justify-center items-center">
<div class="flex justify-center items-center">
<mat-card class="outline-card min-w-[720px] max-tablet:min-w-[80%]">
<h2 class="flex justify-center">Register</h2>
<div>
Expand Down
38 changes: 14 additions & 24 deletions apps/36-blocks/src/app/users/management/management.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef>Role</th>
<td mat-cell *matCellDef="let element" data-label="Role">
<span class="font-semibold text-sm text-color">{{ element.role }}</span>
<span>{{ element.role }}</span>
</td>
</ng-container>

Expand All @@ -65,11 +65,7 @@
<td mat-cell *matCellDef="let element" data-label="Permissions">
<div class="flex flex-wrap gap-1.5 py-2">
@for (permission of element.permissionsList; track permission.name) {
<span
class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--color-common-chip-bg)] [color:var(--color-common-text-2)]"
>
{{ permission.name }}
</span>
{{ permission.name }}
}
</div>
</td>
Expand Down Expand Up @@ -168,9 +164,9 @@
<ng-container matColumnDef="permission">
<th mat-header-cell *matHeaderCellDef>Permission</th>
<td mat-cell *matCellDef="let element" data-label="Permission">
<p class="font-semibold text-sm text-color m-0">{{ element.name }}</p>
<p class="m-0">{{ element.name }}</p>
@if (element.description) {
<p class="text-xs [color:var(--color-common-text-2)] mt-0.5 m-0">
<p class="text-xs mt-0.5 m-0">
{{ element.description }}
</p>
}
Expand Down Expand Up @@ -240,18 +236,18 @@
<!-- ── Snippet Tab ── -->
@if (selectedSectionIndex === 2) {
<div class="flex flex-col gap-4 max-w-2xl">
<div class="rounded-xl border broder-color overflow-hidden">
<div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
<div class="card-with-header">
<div class="card-with-header--header justify-between">
<div class="flex items-center gap-2">
<mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">code</mat-icon>
<span class="mat-body-2 font-semibold">Integration Script</span>
</div>
<proxy-copy-button [copyData]="userManagementScript" tooltip="Copy Script"></proxy-copy-button>
</div>
<div class="overflow-auto code-snippet-view">
<div class="bg-color overflow-auto code-snippet-view">
<markdown [data]="userManagementScript | language: 'javascript'"></markdown>
</div>
<div class="flex gap-2 px-4 py-3 border-t broder-color bg-color">
<div class="bg-color flex gap-2 px-4 py-3 border-t border-color bg-color">
<mat-icon class="!text-sm !w-3.5 !h-3.5 secondary-text-color opacity-60 shrink-0 mt-0.5"
>info</mat-icon
>
Expand All @@ -260,15 +256,15 @@
</p>
</div>
</div>
<div class="rounded-xl border broder-color overflow-hidden">
<div class="flex items-center justify-between px-4 py-3 border-b broder-color bg-color">
<div class="card-with-header">
<div class="card-with-header--header justify-between">
<div class="flex items-center gap-2">
<mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">html</mat-icon>
<span class="mat-body-2 font-semibold">Container HTML</span>
</div>
<proxy-copy-button [copyData]="userProxyContainerHtml" tooltip="Copy Code"></proxy-copy-button>
</div>
<div class="overflow-auto code-snippet-view">
<div class="bg-color overflow-auto code-snippet-view">
<markdown [data]="userProxyContainerHtml | language: 'html'"></markdown>
</div>
</div>
Expand All @@ -283,9 +279,7 @@
<form [formGroup]="defaultRolesForm" class="flex flex-col gap-6">
<mat-card class="outline-card p-5">
<mat-card-content class="flex items-start gap-3 !p-0">
<div
class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
>
<div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
<mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
>person_add</mat-icon
>
Expand All @@ -307,9 +301,7 @@

<mat-card class="outline-card p-5">
<mat-card-content class="flex items-start gap-3 !p-0">
<div
class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
>
<div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
<mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
>group_add</mat-icon
>
Expand All @@ -331,9 +323,7 @@

<mat-card class="outline-card p-5">
<mat-card-content class="flex items-start gap-3 !p-0">
<div
class="mt-0.5 w-8 h-8 rounded-lg bg-[var(--color-common-bg-light)] flex items-center justify-center shrink-0"
>
<div class="mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0">
<mat-icon class="material-icons-outlined mat-icon-18 [color:var(--color-common-icon)]"
>visibility_off</mat-icon
>
Expand Down
Loading
Loading