Skip to content

WEB-337-Improved the UI styling by adjusting spacing and layout for better readability and alignment #2697

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

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
+113 −79
Open

WEB-337-Improved the UI styling by adjusting spacing and layout for better readability and alignment #2697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
134 changes: 55 additions & 79 deletions src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,62 @@
<mat-card>
<form #dataTableFormRef [formGroup]="dataTableForm" (ngSubmit)="submit()">
<mat-card-content>
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-40">
<mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
<input matInput required formControlName="datatableName" />
<mat-error *ngIf="dataTableForm.controls.datatableName.hasError('required')">
{{ 'labels.inputs.Data Table Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>

<mat-form-field class="flex-fill flex-20">
<mat-label>{{ 'labels.inputs.Entity Type' | translate }}</mat-label>
<mat-select required formControlName="apptableName">
<mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
{{ appTable.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
<mat-error *ngIf="dataTableForm.controls.apptableName.hasError('required')">
{{ 'labels.inputs.Application Table Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>

<mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
<mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
<mat-select formControlName="entitySubType">
<mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
{{ entitySubType.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-fill flex-20" *ngIf="showSavingsSubType">
<mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
<mat-select formControlName="entitySubType">
<mat-option *ngFor="let savingsSubType of savingsSubTypeData" [value]="savingsSubType.value">
{{ savingsSubType.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>

<div class="multi-row-wrapper flex-14">
<mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">{{
'labels.inputs.Multi Row' | translate
}}</mat-checkbox>
<mat-card class="first-box">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-40">
<mat-label>{{ 'labels.inputs.Data Table Name' | translate }}</mat-label>
<input matInput required formControlName="datatableName" />
<mat-error *ngIf="dataTableForm.controls.datatableName.hasError('required')">
{{ 'labels.inputs.Data Table Name' | translate }}
{{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>

<mat-form-field class="flex-fill flex-20">
<mat-label>{{ 'labels.inputs.Entity Type' | translate }}</mat-label>
<mat-select required formControlName="apptableName">
<mat-option *ngFor="let appTable of appTableData" [value]="appTable.value">
{{ appTable.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-fill flex-20" *ngIf="showEntitySubType">
<mat-label>{{ 'labels.inputs.Entity SubType' | translate }}</mat-label>
<mat-select formControlName="entitySubType">
<mat-option *ngFor="let entitySubType of entitySubTypeData" [value]="entitySubType.value">
{{ entitySubType.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-fill flex-20" *ngIf="showSavingsSubType">
<mat-label>{{ 'labels.inputs.Savings SubType' | translate }}</mat-label>
<mat-select formControlName="entitySubType">
<mat-option *ngFor="let savingsSubType of savingsSubTypeData" [value]="savingsSubType.value">
{{ savingsSubType.displayValue | translateKey: 'inputs' }}
</mat-option>
</mat-select>
</mat-form-field>

<div class="multi-row-wrapper flex-14">
<mat-checkbox labelPosition="before" formControlName="multiRow" class="multi-row">
{{ 'labels.inputs.Multi Row' | translate }}
</mat-checkbox>
</div>
</div>
</div>
<br />

<div class="layout-row-wrap gap-60percent layout-lt-md-column">
<p class="mat-title flex-20">{{ 'labels.inputs.Columns' | translate }}</p>
<br />

<button mat-raised-button class="flex-20" type="button" color="primary" (click)="addColumn()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Columns' | translate }}
</button>
</div>
<div class="layout-row-wrap gap-60percent layout-lt-md-column">
<p class="mat-title flex-20">{{ 'labels.inputs.Columns' | translate }}</p>
<button mat-raised-button class="flex-20" type="button" color="primary" (click)="addColumn()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }} {{ 'labels.inputs.Columns' | translate }}
</button>
</div>
</mat-card>

<br />

Expand Down Expand Up @@ -134,7 +133,7 @@
size="lg"
class="not-column-mandatory"
matTooltip="{{ 'tooltips.No' | translate }}"
unique="right"
matTooltipPosition="right"
></fa-icon>
</td>
</ng-container>
Expand Down Expand Up @@ -175,6 +174,7 @@
</td>
</ng-container>

<!-- Rows -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
Expand All @@ -193,27 +193,3 @@
</form>
</mat-card>
</div>

<ng-template #templateDataTableFormRef let-popover="popover">
<h2>{{ 'labels.buttons.Create Datatable' | translate }}</h2>
<p class="mw400">
{{ 'labels.text.Filling Details' | translate }}
<a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52592760/Manage+Data+Tables" target="_blank">{{
'labels.inputs.Manage Datatables' | translate
}}</a>
</p>
<div class="layout-row align-end gap-2px responsive-column">
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
{{ 'labels.buttons.Close' | translate }}
</button>
<button mat-raised-button color="primary" (click)="popover.close()">
{{ 'labels.buttons.Create Datatable' | translate }}
</button>
<button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
{{ 'labels.buttons.Back' | translate }}
</button>
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
{{ 'labels.buttons.Next' | translate }}
</button>
</div>
</ng-template>
58 changes: 58 additions & 0 deletions src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,62 @@

table {
width: 100%;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}

.first-box {
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
padding: 16px;
margin-bottom: 20px;
border-radius: 8px;
}

.layout-lt-md-column {
p {
margin-top: 9px;
}

button {
position: relative;
right: 150px;
margin-top: 5px;
width: 100%;
}
Comment on lines +40 to +45
Copy link

@coderabbitai coderabbitai bot Oct 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Fix the button layout regression on large screens.

Setting width: 100% and nudging the button right: 150px makes it span the entire row and overlap adjacent content once the viewport is ≥992px, breaking the alignment this PR is trying to improve. Please keep the button auto-sized for desktop and only stretch it on narrow breakpoints. A flex-friendly tweak can look like:

 .layout-lt-md-column {
   button {
-    position: relative;
-    right: 150px;
-    margin-top: 5px;
-    width: 100%;
+    margin-top: 5px;
+    margin-left: auto;
   }
 }
 
 @media (width <= 768px) {
   .layout-lt-md-column {
     button {
-      right: 0;
-      width: 100%;
-      margin-top: 5px;
+      width: 100%;
+      margin-left: 0;
     }
   }
 }
 
 @media (width >= 769px) and (width <= 991px) {
   .layout-lt-md-column {
     button {
-      right: 20px;
-      width: auto;
+      margin-left: auto;
+      width: auto;
     }
   }
 }

This keeps the desktop layout intact while preserving the mobile-friendly full-width button.

Also applies to: 58-62

🤖 Prompt for AI Agents 
In
src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
around lines 40-45 (and similarly 58-62), the button is forced full-width and
shifted right with right:150px which causes overlap on large viewports; change
the rules to remove right:150px and width:100%, make the button auto-sized by
default (width: auto) and use margin-left: auto or align-self: flex-end when the
parent is a flex container to keep it right-aligned on desktop, and add a media
query (max-width: 991px) to set width: 100% for narrow screens so the button
becomes full-width on mobile; apply the identical adjustments to the other
occurrence at lines 58-62.

Copy link
Contributor

Choose a reason for hiding this comment

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

@shubhamkumar9199 could you please check this review?

Copy link

Choose a reason for hiding this comment

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

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@shubhamkumar9199 could you please check this review?

@IOhacker i am working on it

}

@media (width <= 768px) {
.multi-row-wrapper {
.multi-row {
position: relative;
padding: 10px 0;
width: 100%;
text-align: center;
}
}

.layout-lt-md-column {
button {
right: 0;
width: 100%;
margin-top: 5px;
}
}
}

@media (width >= 769px) and (width <= 991px) {
.layout-lt-md-column {
button {
right: 20px;
width: auto;
}
}
}