Skip to content

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

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
Kovy95 wants to merge 1 commit into
base: release/6.5.0
Choose a base branch
from
Open

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

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
28 changes: 28 additions & 0 deletions nae.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,34 @@
"routing": {
"path": "breadcrumbs"
}
},
"double-menu-tabbed-views": {
"component": {
"class": "TabbedViewsExampleComponent",
"from": "./doc/tabbed-case-view/tabbed-views-example.component"
},
"access": "private",
"navigation": {
"title": "Custom Tabbed View",
"icon": "tab"
},
"routing": {
"path": "double-menu-tabbed-views"
},
"children": {
"custom-redirect": {
"component": {
"class": "TabbedViewsExampleComponent",
"from": "./doc/tabbed-case-view/tabbed-views-example.component"
},
"access": "private",
"navigation": false,
"routing": {
"path": "**"
}
}
},
"processUri": "/"
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion ...ts/nae-example-app/src/app/doc/double-drawer-example/double-drawer-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_white.svg" imageRouterLink="/tabbed-views">
<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_black.svg" imageRouterLink="/tabbed-views">
<router-outlet></router-outlet>
</nc-navigation-double-drawer>
6 changes: 5 additions & 1 deletion ...e-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,11 @@ export class TabbedCaseViewComponent extends AbstractTabbedCaseViewComponent imp
@Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedCaseViewData) {
super(caseViewService, loggerService, injectedTabData, overflowService, undefined, undefined, {
enableCaseTitle: true,
isCaseTitleRequired: true
isCaseTitleRequired: true,
newCaseButtonConfig: {
createCaseButtonTitle: 'My custom create case button',
createCaseButtonIcon: 'home'
}
});
}

Expand Down
2 changes: 1 addition & 1 deletion ...example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

.search-panel {
margin-top: 16px;
padding: 8px 16px;
margin-bottom: 2px;
}

.content-margin {
Expand Down
56 changes: 56 additions & 0 deletions projects/nae-example-app/src/assets/img/netgrif_full_black.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions projects/netgrif-components/nae-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,7 @@
margin-top: 0 !important;
margin-bottom: 0 !important;
}

.mat-paginator {
background: transparent !important;
}
2 changes: 1 addition & 1 deletion ...src/lib/data-fields/button-field/button-default-field/button-default-field.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

.padding-bottom {
padding-bottom: 6px;
padding-bottom: 12px;
}
.no-shadow {
box-shadow: unset !important;
Expand Down
25 changes: 20 additions & 5 deletions projects/netgrif-components/src/lib/data-fields/data-field.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
$color-text-enabled: #64748B;
$color-outline-enabled: #64748B;

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

@coderabbitai coderabbitai Bot May 25, 2026

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.


.editor-preview > h1 {
border-bottom: 1px solid #ddd;
}
Expand Down Expand Up @@ -70,13 +74,13 @@
}

.invalid-form-input {
border: solid 2px mat.get-color-from-palette($primary) !important;
border: solid 2px mat.get-color-from-palette($warn) !important;
padding: 1px !important;
}

.invalid-form-label {
color: mat.get-color-from-palette($primary) !important;
}
//.invalid-form-label {
// color: mat.get-color-from-palette($primary) !important;

Check warning on line 82 in projects/netgrif-components/src/lib/data-fields/data-field.theme.scss

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHOd05_yYf-qfiLe&open=AZ5fhHOd05_yYf-qfiLe&pullRequest=331
//}

.netgrif-input {

Expand Down Expand Up @@ -216,7 +220,7 @@
}

.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0.25px 0 0;
margin: 0.25px 0 2px;
}

// DISABLED
Expand Down Expand Up @@ -323,6 +327,17 @@
}
}

.netgrif-chip-button-fix {
&.mat-form-field .mat-form-field-prefix {
top: 0.33em !important;
padding-right: 4px !important;
}

.netgrif-label {
font-weight: 400 !important;
}
}

.mat-select-trigger {
height: unset;
min-height: 1.125em;
Expand Down
10 changes: 6 additions & 4 deletions ...-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</ng-template>
</ng-template>
<ng-template [ngIf]="!formControlRef.disabled">
<div class="full-width">
<div class="full-width" [ngClass]="{'padding-bottom-fix': !dataField.isInvalid(formControlRef) && !hasHint()}">
<div #i18nLabel class="i18n-label" [ngClass]="{'invalid-form-label': dataField.isInvalid(formControlRef)}">
{{dataField.title}}
<nc-required-label *ngIf="dataField.behavior.required" [isIn]="!dataField.disabled"></nc-required-label>
Expand Down Expand Up @@ -75,8 +75,10 @@
</button>
</div>
</div>
<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 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>
Comment on lines +78 to +82
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 25, 2026

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.

</div>
</ng-template>
10 changes: 10 additions & 0 deletions ...-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
padding: 0 1em;
font-size: 75%;
width: auto !important;
display: block;
}

.language-svg-wrapper {
Expand Down Expand Up @@ -149,3 +150,12 @@
.i18n-bold-text {
font-weight: bold;
}

.padding-bottom-fix {
padding-bottom: 1em;
}

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

@coderabbitai coderabbitai Bot May 25, 2026

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.

2 changes: 1 addition & 1 deletion ...tion-field/string-collection-default-field/string-collection-default-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<mat-form-field [appearance]="dataField.materialAppearance" class="full-width" color="primary">
<mat-form-field [appearance]="dataField.materialAppearance" class="full-width" [ngClass]="{'netgrif-chip-fix' : dataField.value?.length > 0}" color="primary">
<mat-label *ngIf="!showLargeLayout.value">{{dataField.title}}</mat-label>
<mat-chip-list #chipList aria-label="Autocomplete" [formControl]="formControlRef">
<mat-chip
Expand Down
3 changes: 2 additions & 1 deletion ...ata-fields/user-list-field/user-list-default-field/user-list-default-field.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<mat-form-field [appearance]="dataField.materialAppearance" class="full-width"
<mat-form-field [appearance]="dataField.materialAppearance" class="full-width netgrif-chip-button-fix"
[ngClass]="{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}" color="primary">
<mat-label class="netgrif-label" [ngClass]="{'netgrif-label-disabled': formControlRef.disabled}"
*ngIf="!showLargeLayout.value">{{ dataField.title }}
Expand Down Expand Up @@ -30,6 +30,7 @@
aria-label="Autocomplete"
matInput
#input
disabled="true"
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 25, 2026

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.

[placeholder]="dataField.placeholder"
[required]="dataField.behavior.required"
[matChipInputFor]="chipList">
Expand Down
2 changes: 1 addition & 1 deletion projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.breadcrumbs {
margin: 4px;
margin: 4px 0;
-webkit-box-align: center;
align-items: center;
align-self: center;
Expand Down
2 changes: 1 addition & 1 deletion ...ault-components/refs/default-case-ref-list-view/default-case-ref-list-view.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.case-view-container {
margin: 16px 24px;
//margin: 16px 24px;

Check warning on line 2 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

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHQu05_yYf-qfiLg&open=AZ5fhHQu05_yYf-qfiLg&pullRequest=331
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 25, 2026

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.

height: calc(100% - 32px);
overflow: auto
}
Comment on lines 1 to 5
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 25, 2026

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.

Expand Down
4 changes: 2 additions & 2 deletions ...onent-resolver/default-components/refs/default-task-view/default-task-view.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@

.search-panel {
margin-top: 16px;
padding: 8px 16px;
padding: 8px 0;
}

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

Check warning on line 14 in projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/refs/default-task-view/default-task-view.component.scss

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHQh05_yYf-qfiLf&open=AZ5fhHQh05_yYf-qfiLf&pullRequest=331
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 25, 2026

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.

}

@media screen and (max-width: 599.99px) {
Expand Down
20 changes: 10 additions & 10 deletions ...nents/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="drawer-control rail-color height-60" [ngClass]="{'index-menu': !configLeftMenu.opened}"
<div class="drawer-control rail-color height-48" [ngClass]="{'index-menu': !configLeftMenu.opened}"
fxLayoutAlign="center center" fxHide.lt-md>
<button mat-icon-button (click)="toggleMenu()" class="menu-button mat-typography menu-font-color">
<mat-icon>menu</mat-icon>
Expand Down Expand Up @@ -122,7 +122,7 @@

<ng-template #defaultLeftSide>

<div class="height-60 border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
<div class="height-48 border-bottom" fxLayoutAlign="center center" fxHide.lt-md>
<button mat-icon-button (click)="toggleRightMenu()" class="menu-button mat-typography menu-font-color">
<mat-icon>menu</mat-icon>
</button>
Expand Down Expand Up @@ -165,14 +165,14 @@
<img *ngIf="image !== undefined" [alt]="imageAlt" [src]="image" class="logoimg"
[routerLink]="imageRouterLink !== undefined ? imageRouterLink : []">
</div>
<div *ngIf="(rightLoading$ | async) === false">
<div fxLayout="column" fxLayoutAlign="end end" class="order-icon-wrapper">
<button mat-icon-button fxLayout="column" fxLayoutAlign="center center"
class="mat-button mat-typography menu-font-color order-icon" (click)="switchOrder()"
[matTooltip]="isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)">
<mat-icon>{{ isAscending() ? "expand_more" : "expand_less" }}</mat-icon>
</button>
</div>
<div *ngIf="(rightLoading$ | async) === false" class="margin-top-default">
<!-- <div fxLayout="column" fxLayoutAlign="end end" class="order-icon-wrapper">-->

Check warning on line 169 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLh&open=AZ5fhHRH05_yYf-qfiLh&pullRequest=331
<!-- <button mat-icon-button fxLayout="column" fxLayoutAlign="center center"-->

Check warning on line 170 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLi&open=AZ5fhHRH05_yYf-qfiLi&pullRequest=331
<!-- class="mat-button mat-typography menu-font-color order-icon" (click)="switchOrder()"-->

Check warning on line 171 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLj&open=AZ5fhHRH05_yYf-qfiLj&pullRequest=331
<!-- [matTooltip]="isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)">-->

Check warning on line 172 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLk&open=AZ5fhHRH05_yYf-qfiLk&pullRequest=331
<!-- <mat-icon>{{ isAscending() ? "expand_more" : "expand_less" }}</mat-icon>-->

Check warning on line 173 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLl&open=AZ5fhHRH05_yYf-qfiLl&pullRequest=331
<!-- </button>-->

Check warning on line 174 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLm&open=AZ5fhHRH05_yYf-qfiLm&pullRequest=331
<!-- </div>-->

Check warning on line 175 in projects/netgrif-components/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Remove this commented out code. 


See more on https://sonarcloud.io/project/issues?id=netgrif_components&issues=AZ5fhHRH05_yYf-qfiLn&open=AZ5fhHRH05_yYf-qfiLn&pullRequest=331
<div *ngFor='let item of rightItems$ | async; trackBy: itemsTrackBy' (click)="onItemClick(item)"
class="tree-node mat-typography mat-body-2" fxLayoutAlign="start center" [routerLink]='item.routing.path'
routerLinkActive="active-tree-node">
Expand Down
9 changes: 5 additions & 4 deletions ...nents/src/lib/navigation/navigation-double-drawer/navigation-double-drawer.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
box-shadow: 0px 2px 4px rgba(13, 45, 60, 0.16), 0px 4px 8px rgba(84, 110, 122, 0.16);
}

.height-60 {
height: 60px;
.height-48 {
height: 48px;
}

.drawer-control {
Expand All @@ -42,14 +42,15 @@

.border-bottom {
border-bottom: 1px solid #E2E8F0;
box-sizing: content-box !important;
}

.logo {
height: 60px;
height: 48px;
}

.logo-closed {
width: 60px !important;
width: 48px !important;
}

.logoimg {
Expand Down
1 change: 1 addition & 0 deletions projects/netgrif-components/src/lib/navigation/navigation.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@

.active-tree-node {
color: mat.get-color-from-palette($primary) !important;
background-color: rgba(mat.get-color-from-palette($primary), 0.25);
}

.tree-node {
Expand Down
2 changes: 1 addition & 1 deletion projects/netgrif-components/src/lib/panel/panel.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
.panel-body {
.mat-expansion-panel-body {
padding: 0 !important;
background-color: #F8FAFC;
background-color: #ffffff;
}
}

Expand Down
2 changes: 1 addition & 1 deletion projects/netgrif-components/src/lib/tabs/tabs.theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.mat-tab-header {
border-bottom: 2px solid #E2E8F0;
border-bottom: 1px solid #E2E8F0;
}

.icon-tab-color {
Expand Down
2 changes: 1 addition & 1 deletion .../src/lib/view/case-view/components/case-list-paginator/case-list-paginator.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<div *ngIf="(loading$ | async) === false && cases.length === 0" fxLayout="column"
fxLayoutAlign="center center" fxFlex>
<mat-icon color="accent" class="margin-bottom-default">storage</mat-icon>
<mat-icon color="accent" class="margin-bottom-default margin-top-default">storage</mat-icon>
<span class="font-size-20">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>
</div>

Expand Down
2 changes: 1 addition & 1 deletion ...s/netgrif-components/src/lib/view/case-view/components/case-list/case-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<div *ngIf="(loading$ | async) === false && cases.length === 0" fxLayout="column"
fxLayoutAlign="center center" fxFlex>
<mat-icon color="accent" class="margin-bottom-default">storage</mat-icon>
<mat-icon color="accent" class="margin-bottom-default margin-top-default">storage</mat-icon>
<span class="font-size-20">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>
</div>

Expand Down
Loading
Loading