Skip to content

[NAE-2413] Minor CSS changes & fixes#331

Open
Kovy95 wants to merge 1 commit into
release/6.5.0from
NAE-2413
Open

[NAE-2413] Minor CSS changes & fixes#331
Kovy95 wants to merge 1 commit into
release/6.5.0from
NAE-2413

Conversation

@Kovy95
Copy link
Copy Markdown
Contributor

@Kovy95 Kovy95 commented May 25, 2026

Description

  • change margin of breadcrumbs
  • change buttonfield padding
  • change margin
  • change background of pagination
  • remove sorting icon on double drawer
  • remove margin on refs case and task views
  • fix alignment on i18n field
  • fix alignment of create case button
  • fix text color on datafields

Fixes NAE-2413

Dependencies

none

Third party dependencies

  • No new dependencies were introduced

Blocking Pull requests

There are no dependencies on other PR

How Has Been This Tested?

manually

Test Configuration

<Please describe configuration for tests to run if applicable, like program parameters, host OS, VM configuration etc. You can use >

Name Tested on
OS LinuxMint 22
Runtime Node 20.18.0
Dependency Manager NPM 10.8.2
Framework version Angular 13.3.1
Run parameters
Other configuration

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • My changes have been checked, personally or remotely, with @...
  • I have commented my code, particularly in hard-to-understand areas
  • I have resolved all conflicts with the target branch of the PR
  • I have updated and synced my code with the target branch
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes:
    • Lint test
    • Unit tests
    • Integration tests
  • I have checked my contribution with code analysis tools:
  • I have made corresponding changes to the documentation:
    • Developer documentation
    • User Guides
    • Migration Guides

Summary by CodeRabbit

Release Notes

  • New Features

    • Added a new tabbed views example configuration.
  • Style

    • Improved spacing and padding across buttons, form fields, and navigation components.
    • Refined drawer navigation height and layout sizing.
    • Updated panel background colors and tab header styling.
    • Enhanced form label and field styling for better visual consistency.
    • Adjusted breadcrumb and case list empty state spacing.

Review Change Stack

- change margin of breadcrumbs
- change buttonfield padding
- change margin
- change background of pagination
- remove sorting icon on double drawer
- remove margin on refs case and task views
- fix alignment on i18n field
- fix alignment of create case button
- fix text color on datafields
@Kovy95 Kovy95 self-assigned this May 25, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 25, 2026

Walkthrough

This PR applies systematic styling and UI refinements across the Netgrif components library. A new demo view configuration is added alongside updates to navigation drawer layout (60px→48px height reduction with order-switch removal), form field theming (label colors, invalid border palette, wrapper margins), and i18n field hint/error rendering. Material theme overrides address paginator, panel, and tab styling, while spacing adjustments affect breadcrumbs, case views, and multiple component margins.

Changes

Styling and UI refinements across library

Layer / File(s) Summary
Demo view configuration and example component updates
nae.json, projects/nae-example-app/src/app/doc/double-drawer-example/double-drawer-example.component.html, projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts, projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.scss
New double-menu-tabbed-views demo view added with navigation and routing configuration. Example components updated with custom create-case button config and search panel styling.
Double drawer height reduction and UI layout
projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html, projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
Navigation double drawer height reduced from 60px to 48px; left drawer control and logo dimensions adjusted. Order-switch UI removed from right side; prior markup left commented out.
Form field label and border color theming
projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
Form field label color explicitly set using enabled text color with !important. Invalid input border now uses warn palette instead of primary. Outline wrapper bottom margin increased to 2px.
Chip and collection field styling fixes
projects/netgrif-components/src/lib/data-fields/data-field.theme.scss, projects/netgrif-components/src/lib/data-fields/string-collection-field/string-collection-default-field/string-collection-default-field.component.html, projects/netgrif-components/src/lib/data-fields/user-list-field/user-list-default-field/user-list-default-field.component.html
New .netgrif-chip-button-fix theme style for form field prefix positioning and label font weight. String-collection and user-list fields conditionally apply chip-fix classes. User-list input explicitly disabled in template.
i18n text field hint/error refactoring and spacing
projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html, projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
Hint/error area wrapped in conditional container with combined visibility logic. New .padding-bottom-fix and .i18n-hint-wrapper utility styles. Hint-error block now uses display: block.
Material theme overrides and global styling
projects/netgrif-components/nae-theme.scss, projects/netgrif-components/src/lib/data-fields/button-field/button-default-field/button-default-field.component.scss, projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.scss, projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss, projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-task-view/default-task-view.component.scss, projects/netgrif-components/src/lib/navigation/navigation.theme.scss, projects/netgrif-components/src/lib/panel/panel.theme.scss, projects/netgrif-components/src/lib/tabs/tabs.theme.scss, projects/netgrif-components/src/lib/view/case-view/components/case-list-paginator/case-list-paginator.component.html, projects/netgrif-components/src/lib/view/case-view/components/case-list/case-list.component.html, projects/netgrif-components/src/lib/view/case-view/components/create-case-button/create-case-button.component.scss
Paginator background set to transparent. Panel body background changed to white. Tab header border reduced from 2px to 1px. Active tree node given primary color background. Button field padding increased from 6px to 12px. Breadcrumbs margin adjusted to vertical-only. Case views and case list paginator margin-top classes added. Create case button margin-right increased.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • netgrif/components#308: Both PRs modify the navigation-double-drawer.component.html conditional rendering logic around the drawer loading state and UI template structure.

Suggested labels

improvement, Medium

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'NAE-2413 Minor CSS changes & fixes' accurately reflects the changeset, which consists primarily of CSS adjustments, spacing fixes, and styling updates across multiple components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot added improvement New feature or request Medium labels May 25, 2026
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 7

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@projects/netgrif-components/src/lib/data-fields/data-field.theme.scss`:
- Around line 18-20: The global use of !important on the .mat-form-field-label
rule prevents state/theme overrides from applying; remove the !important from
the .mat-form-field-label declaration (or alternatively scope the rule to a
narrower selector such as a wrapper class) so that focused/disabled label rules
and the .netgrif-input-primary-fix label overrides can take effect, and if you
must keep higher specificity for a default color, make the specific state
selectors (e.g., focused/disabled selectors and .netgrif-input-primary-fix)
explicitly override with either higher-specificity selectors or use !important
only on those state rules.

In
`@projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html`:
- Around line 78-82: The conditional in the wrapper is relying on mixed && and
|| precedence which reduces readability; wrap the expressions explicitly so it's
clear that the wrapper should render when either (not invalid and hasHint()) or
(isInvalid), e.g. change the *ngIf to use parentheses around
(!dataField.isInvalid(formControlRef) && hasHint()) ||
dataField.isInvalid(formControlRef); keep the inner *ngIfs and references to
dataField.isInvalid(formControlRef), hasHint(), formControlRef and
getErrorMessage() unchanged.

In
`@projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss`:
- Around line 158-161: The .i18n-hint-wrapper CSS rule currently uses a fixed
height (height: 18px) which can truncate multi-line or larger-font hint/error
text; change this to use min-height (e.g., min-height: 18px) so it can expand
when content wraps or accessibility settings increase font size, and keep or
adjust margin-top: -3px only if visual spacing still looks correct — update the
.i18n-hint-wrapper rule accordingly.

In
`@projects/netgrif-components/src/lib/data-fields/user-list-field/user-list-default-field/user-list-default-field.component.html`:
- Line 33: The template currently hardcodes disabled="true" on the input in the
UserListDefaultFieldComponent template which prevents typing/filtering; remove
the hardcoded disabled or replace it with a binding to the appropriate component
state (e.g. [disabled]="isReadOnly" or [readonly]="!canType") so the field can
accept input when the form allows, and update the component
(UserListDefaultFieldComponent) to expose the boolean property
(isReadOnly/canType) and set it from form state or permissions; also add a short
comment in the template or component documenting the expected UX for
typing/autocomplete behavior so future reviewers know why the input is
enabled/disabled.

In
`@projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss`:
- Line 2: Remove the commented-out CSS line in
default-case-ref-list-view.component.scss ("//margin: 16px 24px;") — delete this
dead code so the stylesheet contains only active rules; rely on VCS history if
the margin needs to be restored later.
- Around line 1-5: The .case-view-container height calc no longer matches the
commented-out margins: update the CSS so the height matches the actual vertical
offset (either remove the fixed subtraction and use height: 100% or adjust the
calc to reflect current margins); specifically edit the .case-view-container
rule to use height: 100% (or height: calc(100% - 24px) if you want to account
for the 12px top/bottom margins in the `@media` (max-width: 599.99px) block) and
also update the `@media` (max-width: 599.99px) variant to use a consistent calc or
100% matching its 12px vertical margins. Ensure changes affect the
.case-view-container selector and the `@media` (max-width: 599.99px) block so
height subtraction matches actual margins.

In
`@projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-task-view/default-task-view.component.scss`:
- Line 14: Remove the commented-out CSS rule in default-task-view.component.scss
(the "//margin: 8px 24px 0;" line) instead of leaving it commented; if the
surrounding empty selector exists only to contain that commented rule, delete
the empty selector block entirely to avoid dead or commented code residue.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: be1b89fd-9042-45a2-8441-997553310837

📥 Commits

Reviewing files that changed from the base of the PR and between 5b46f21 and 8f6a0ad.

⛔ Files ignored due to path filters (1)
  • projects/nae-example-app/src/assets/img/netgrif_full_black.svg is excluded by !**/*.svg
📒 Files selected for processing (22)
  • nae.json
  • projects/nae-example-app/src/app/doc/double-drawer-example/double-drawer-example.component.html
  • projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts
  • projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.scss
  • projects/netgrif-components/nae-theme.scss
  • projects/netgrif-components/src/lib/data-fields/button-field/button-default-field/button-default-field.component.scss
  • projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
  • projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html
  • projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
  • projects/netgrif-components/src/lib/data-fields/string-collection-field/string-collection-default-field/string-collection-default-field.component.html
  • projects/netgrif-components/src/lib/data-fields/user-list-field/user-list-default-field/user-list-default-field.component.html
  • projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.scss
  • projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss
  • projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-task-view/default-task-view.component.scss
  • projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html
  • projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
  • projects/netgrif-components/src/lib/navigation/navigation.theme.scss
  • projects/netgrif-components/src/lib/panel/panel.theme.scss
  • projects/netgrif-components/src/lib/tabs/tabs.theme.scss
  • projects/netgrif-components/src/lib/view/case-view/components/case-list-paginator/case-list-paginator.component.html
  • projects/netgrif-components/src/lib/view/case-view/components/case-list/case-list.component.html
  • projects/netgrif-components/src/lib/view/case-view/components/create-case-button/create-case-button.component.scss

Comment on lines +18 to +20
.mat-form-field-label {
color: $color-text-enabled !important;
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Search for other form field label color rules that might conflict

rg -n -A2 -B2 'mat-form-field-label' --type=scss --glob='!node_modules/**' | head -50

Repository: netgrif/components

Length of output: 91


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Find all occurrences of the label selector in SCSS files (excluding node_modules)
rg -n --glob='*.scss' 'mat-form-field-label' . | head -200

# 2) Check for disabled label rules nearby / elsewhere
echo '---'
rg -n --glob='*.scss' '\.mat-form-field-disabled' . | head -200
echo '---'
rg -n --glob='*.scss' 'mat-form-field-disabled.*mat-form-field-label|mat-form-field-label.*mat-form-field-disabled' . | head -200

# 3) Inspect the specific theme file around the referenced line ranges
FILE='projects/netgrif-components/src/lib/data-fields/data-field.theme.scss'
echo "--- file existence ---"
ls -l "$FILE"
echo "--- lines 1-80 ---"
nl -ba "$FILE" | sed -n '1,120p'
echo "--- lines 200-270 ---"
nl -ba "$FILE" | sed -n '200,280p'

Repository: netgrif/components

Length of output: 2074


🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE='projects/netgrif-components/src/lib/data-fields/data-field.theme.scss'

echo "--- lines 1-80 ---"
cat -n "$FILE" | sed -n '1,80p'

echo "--- lines 100-160 ---"
cat -n "$FILE" | sed -n '100,160p'

echo "--- lines 210-260 ---"
cat -n "$FILE" | sed -n '210,260p'

echo "--- lines 360-480 ---"
cat -n "$FILE" | sed -n '360,480p'

Repository: netgrif/components

Length of output: 11140


🏁 Script executed:

#!/bin/bash
set -euo pipefail
FILE='projects/netgrif-components/src/lib/data-fields/data-field.theme.scss'

rg -n --glob='*.scss' 'mat-form-field-invalid|mat-form-field-.*error|mat-form-field-*invalid' "$FILE" || true
rg -n --glob='*.scss' 'mat-form-field.*(invalid|error).*(mat-form-field-label|mat-form-field-hint|mat-error)' "$FILE" || true
rg -n --glob='*.scss' '\.mat-form-field-.*error.*\.mat-form-field-label|\.mat-error.*' "$FILE" || true

Repository: netgrif/components

Length of output: 87


Avoid global !important on .mat-form-field-label—it blocks focused/disabled and theming overrides

  • projects/netgrif-components/src/lib/data-fields/data-field.theme.scss sets .mat-form-field-label { color: $color-text-enabled !important; } (lines 18-20), which prevents later non-!important label color rules from applying.
  • Focused/disabled label styles around lines 234-236 and 399-401 don’t use !important, so they can’t override the global rule.
  • The .netgrif-input-primary-fix label overrides around lines 447-452 also lack !important, so they’re likely ineffective under the global !important.
  • Remove/scope the !important (or make the competing state rules explicitly !important) so label coloring can actually vary by state/theme as intended.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/netgrif-components/src/lib/data-fields/data-field.theme.scss` around
lines 18 - 20, The global use of !important on the .mat-form-field-label rule
prevents state/theme overrides from applying; remove the !important from the
.mat-form-field-label declaration (or alternatively scope the rule to a narrower
selector such as a wrapper class) so that focused/disabled label rules and the
.netgrif-input-primary-fix label overrides can take effect, and if you must keep
higher specificity for a default color, make the specific state selectors (e.g.,
focused/disabled selectors and .netgrif-input-primary-fix) explicitly override
with either higher-specificity selectors or use !important only on those state
rules.

Comment on lines +78 to +82
<div class="i18n-hint-wrapper" *ngIf="!dataField.isInvalid(formControlRef) && hasHint() || dataField.isInvalid(formControlRef)">
<mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
*ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
<mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
</div>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial | 💤 Low value

Clarify operator precedence in condition.

The condition !dataField.isInvalid(formControlRef) && hasHint() || dataField.isInvalid(formControlRef) relies on operator precedence where && binds tighter than ||. While this works correctly, adding parentheses improves readability:

-<div class="i18n-hint-wrapper" *ngIf="!dataField.isInvalid(formControlRef) && hasHint() || dataField.isInvalid(formControlRef)">
+<div class="i18n-hint-wrapper" *ngIf="(!dataField.isInvalid(formControlRef) && hasHint()) || dataField.isInvalid(formControlRef)">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="i18n-hint-wrapper" *ngIf="!dataField.isInvalid(formControlRef) && hasHint() || dataField.isInvalid(formControlRef)">
<mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
*ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
<mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
</div>
<div class="i18n-hint-wrapper" *ngIf="(!dataField.isInvalid(formControlRef) && hasHint()) || dataField.isInvalid(formControlRef)">
<mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
*ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
<mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
</div>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html`
around lines 78 - 82, The conditional in the wrapper is relying on mixed && and
|| precedence which reduces readability; wrap the expressions explicitly so it's
clear that the wrapper should render when either (not invalid and hasHint()) or
(isInvalid), e.g. change the *ngIf to use parentheses around
(!dataField.isInvalid(formControlRef) && hasHint()) ||
dataField.isInvalid(formControlRef); keep the inner *ngIfs and references to
dataField.isInvalid(formControlRef), hasHint(), formControlRef and
getErrorMessage() unchanged.

Comment on lines +158 to +161
.i18n-hint-wrapper {
height: 18px;
margin-top: -3px;
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Fixed height on text wrapper may cause truncation.

The fixed height: 18px assumes single-line content and could truncate text if:

  • Error/hint messages wrap to multiple lines
  • Font size is increased for accessibility (e.g., browser zoom, user preferences)
  • Localized messages are longer than expected

Consider using min-height instead of fixed height:

♿ Proposed fix for flexible height
 .i18n-hint-wrapper {
-    height: 18px;
+    min-height: 18px;
     margin-top: -3px;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.i18n-hint-wrapper {
height: 18px;
margin-top: -3px;
}
.i18n-hint-wrapper {
min-height: 18px;
margin-top: -3px;
}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss`
around lines 158 - 161, The .i18n-hint-wrapper CSS rule currently uses a fixed
height (height: 18px) which can truncate multi-line or larger-font hint/error
text; change this to use min-height (e.g., min-height: 18px) so it can expand
when content wraps or accessibility settings increase font size, and keep or
adjust margin-top: -3px only if visual spacing still looks correct — update the
.i18n-hint-wrapper rule accordingly.

aria-label="Autocomplete"
matInput
#input
disabled="true"
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Hardcoded disabled input removes typing capability.

The disabled="true" attribute permanently disables text input regardless of form state. Users can no longer type to filter or search, and must use the "select user" button exclusively. The placeholder text (line 34) will still display, potentially confusing users who expect to be able to type.

Verify that removing the typing/filtering capability is intentional and document the expected UX:

#!/bin/bash
# Description: Check if there's autocomplete or filtering logic that's now unused

ast-grep --pattern 'class UserListDefaultFieldComponent {
  $$$
}'

rg -n 'matChipInputFor|matAutocomplete' --type=ts --type=html --glob='**/user-list**'
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/data-fields/user-list-field/user-list-default-field/user-list-default-field.component.html`
at line 33, The template currently hardcodes disabled="true" on the input in the
UserListDefaultFieldComponent template which prevents typing/filtering; remove
the hardcoded disabled or replace it with a binding to the appropriate component
state (e.g. [disabled]="isReadOnly" or [readonly]="!canType") so the field can
accept input when the form allows, and update the component
(UserListDefaultFieldComponent) to expose the boolean property
(isReadOnly/canType) and set it from form state or permissions; also add a short
comment in the template or component documenting the expected UX for
typing/autocomplete behavior so future reviewers know why the input is
enabled/disabled.

Comment on lines 1 to 5
.case-view-container {
margin: 16px 24px;
//margin: 16px 24px;
height: calc(100% - 32px);
overflow: auto
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for similar height calculations that might be affected by margin changes
rg -n --type=scss 'calc\(100%\s*-\s*32px\)' -C2

Repository: netgrif/components

Length of output: 91


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Re-run the search for the exact height calculation (no invalid --type)
rg -n 'calc\(100%\s*-\s*32px\)' -S . -g'*.scss'

# 2) Find where this class is used (template/host markup)
# Locate the component files near the scss file by filename conventions
COMP_DIR="projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view"

rg -n --hidden --glob '!**/node_modules/**' 'case-view-container' "$COMP_DIR" -S

Repository: netgrif/components

Length of output: 2311


🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILES=(
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss"
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/tabbed/default-tabbed-case-view/default-tabbed-case-view.component.scss"
)

for f in "${FILES[@]}"; do
  echo "==== $f ===="
  nl -ba "$f" | sed -n '1,120p'
done

echo "==== rg margin near target ===="
rg -n "margin\s*:\s*16px|margin\s*:\s*16px\s+\d+px|margin\s*:\s*16px\s+\d+\s+\d+\s+\d+|margin\s*:" \
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss"

echo "==== rg margin near tabbed ===="
rg -n "margin\s*:\s*16px|margin\s*:" \
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/tabbed/default-tabbed-case-view/default-tabbed-case-view.component.scss"

Repository: netgrif/components

Length of output: 310


🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILES=(
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss"
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/tabbed/default-tabbed-case-view/default-tabbed-case-view.component.scss"
)

for f in "${FILES[@]}"; do
  echo "==== $f ===="
  if [ -f "$f" ]; then
    cat -n "$f" | sed -n '1,80p'
  else
    echo "MISSING: $f" >&2
  fi
done

echo "==== rg margin/padding in target files ===="
rg -n "margin\s*:|padding\s*:" \
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss" \
  "projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/tabbed/default-tabbed-case-view/default-tabbed-case-view.component.scss"

Repository: netgrif/components

Length of output: 4980


Adjust .case-view-container height offset after margin removal

  • In projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss, the base margin: 16px 24px is commented out, but .case-view-container still uses height: calc(100% - 32px) (no longer matching the removed 16px + 16px vertical margins).
  • In the @media (max-width: 599.99px) block, the margin becomes 12px 12px (24px vertical), while the height still subtracts 32px.
  • default-tabbed-case-view.component.scss still has margin: 16px 24px, so its calc(100% - 32px) remains consistent.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss`
around lines 1 - 5, The .case-view-container height calc no longer matches the
commented-out margins: update the CSS so the height matches the actual vertical
offset (either remove the fixed subtraction and use height: 100% or adjust the
calc to reflect current margins); specifically edit the .case-view-container
rule to use height: 100% (or height: calc(100% - 24px) if you want to account
for the 12px top/bottom margins in the `@media` (max-width: 599.99px) block) and
also update the `@media` (max-width: 599.99px) variant to use a consistent calc or
100% matching its 12px vertical margins. Ensure changes affect the
.case-view-container selector and the `@media` (max-width: 599.99px) block so
height subtraction matches actual margins.

@@ -1,5 +1,5 @@
.case-view-container {
margin: 16px 24px;
//margin: 16px 24px;
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Remove commented code instead of leaving it in place.

Commented code reduces maintainability. If the margin is no longer needed, remove the line entirely. If it might be needed later, rely on version control history.

🧹 Proposed fix
 .case-view-container {
-    //margin: 16px 24px;
     height: calc(100% - 32px);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
//margin: 16px 24px;
.case-view-container {
height: calc(100% - 32px);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss`
at line 2, Remove the commented-out CSS line in
default-case-ref-list-view.component.scss ("//margin: 16px 24px;") — delete this
dead code so the stylesheet contains only active rules; rely on VCS history if
the margin needs to be restored later.


.content-margin {
margin: 8px 24px 0;
//margin: 8px 24px 0;
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Remove commented code instead of leaving it in place.

Commented code reduces maintainability. If the margin is no longer needed, remove the line entirely rather than commenting it out.

🧹 Proposed fix
-.content-margin {
-    //margin: 8px 24px 0;
-}
+.content-margin {}

Or remove the empty selector entirely if it serves no purpose.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
//margin: 8px 24px 0;
.content-margin {}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-task-view/default-task-view.component.scss`
at line 14, Remove the commented-out CSS rule in
default-task-view.component.scss (the "//margin: 8px 24px 0;" line) instead of
leaving it commented; if the surrounding empty selector exists only to contain
that commented rule, delete the empty selector block entirely to avoid dead or
commented code residue.

@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

improvement New feature or request Medium

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant