Repository navigation
WEB-1372: Fix clipped columns in entity lists - #4192
harshiniiiiiii wants to merge 1 commit into
Conversation
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 59 minutes. View limit details
Note
|
| Layer / File(s) | Summary |
|---|---|
Entity row titles src/app/centers/centers.component.html, src/app/clients/clients.component.html, src/app/groups/groups.component.html |
Rows add title attributes for account numbers, external IDs, and office names. Displayed values and missing external-ID fallbacks remain unchanged. |
Responsive list sizing and scrolling src/assets/styles/_entity-list.scss, src/app/loans/loans.component.scss |
The shared list styles update container width, search sizing, grid dimensions, horizontal scrolling, and footer positioning. At widths up to 1100px, the list uses a compact grid and the loan layout stretches its children. |
Priority:
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Bug fix
Suggested reviewers: alberto-art3ch
Merge Risk: 
f95b7
-
The responsive list changes preserve column alignment and confine horizontal scrolling without identified merge-blocking risk.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check The title "WEB-1372: Fix clipped columns in entity lists" matches the main change. The PR fixes clipped right-hand columns in the Clients, Groups, and Centers lists and clipping in the Loans table bel… Docstring Coverage No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0… Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Title check
-
Explanation
The title "WEB-1372: Fix clipped columns in entity lists" matches the main change. The PR fixes clipped right-hand columns in the Clients, Groups, and Centers lists and clipping in the Loans table below 1100px. The changeset also adds title tooltips and adjusts the shared container width, which the title does not mention, but those are supporting changes. The title is short, specific, and uses a ticket identifier that a teammate can trace.
Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (5 skipped: 5 unsupported.)
-
Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
f95b777 to
c6dd162
Compare
|
@IOhacker ptal |
a70a7b5 to
4349df0
Compare
The shared entity list capped its container at 70% width and hid overflow, so the right-hand columns were unreachable between ~846px and ~1100px. Make the container fluid, tighten the grid tracks on the 8px grid below 1100px, and let the list scroll horizontally on very narrow screens while the footer stays pinned. Also stretch the stacked loans layout so its table scrolls inside the page instead of overflowing it, and expose full account/external/office values as title tooltips where tracks can ellipsize them.
4349df0 to
4d7a895
Compare
Description
Fixes the clipped right-hand columns in the Clients, Groups, and Centers entity lists, and the unreadable loans table below 1100px.
Root cause (shared lists):
.entity-list-containerwas capped atmax-width: 70%while also usingoverflow: hidden. At 846px the container was narrower than the grid content, so Account No., External ID, and Office Name were clipped with no way to reach them. At 846px the container measured 547px client width against 898px of list content (the ticket reports 585px / 898px).Root cause (Loans): below 1100px
.loans-layoutswitches to a column, but keptalign-items: flex-start. The.loans-containertherefore sized to its 848px content instead of the available width and was clipped by the page/sidenav.Changes:
.entity-list-containerfluid (width: calc(100% - 32px); max-width: 84rem) so it uses the available width at every breakpoint.min-width: min-contentto the header/rows andoverflow-x: autoon.list. On very narrow screens (e.g. 600px) the list scrolls horizontally instead of losing columns, and the footer stays pinned withposition: sticky; left: 0.titlebindings for account number, external ID, and office name so a value that is visually ellipsized remains readable in full.align-items: stretchto the stacked.loans-layoutso the loans table scrolls inside.table-scroll(which already has the synced top scrollbar) instead of overflowing the page.No columns are hidden or duplicated, no sticky first column, and no new responsive abstraction was introduced.
Related issues and discussion
Jira: WEB-1372
Screenshots
846px wide (the width from the report), before / after.
Verification
Measured in Chrome against
demo.mifos.communityat 600 / 846 / 1024 / 1280 / 1440 CSS px.sticky, verified atscrollLeft: 222).toolbar scrollWidth748 =clientWidth748).Checks on the final commit (
f95b77740):npm run lint, Prettier, Stylelint, Htmlhint, file-header validation andnpm run buildall passed; the focused Jest run forclients.component.spec.tsandcenters-view.component.spec.tspassed (2 suites, 27 tests). There is no component spec for Groups or the Loans list.Checklist
WEB-1372: Fix clipped columns in entity lists).web-app/.github/CONTRIBUTING.md.titlebindings render data values).