SRVKP-9983: CSS fix for log viewer and nav items

[anwesha-palit-redhat]

CSS fix for log viewer and nav items

Changes

• Updated log viewer styling to use proper PatternFly v6 design tokens for consistent theming across light/dark modes
• Improved navigation items with enhanced visual indicators (3px left border for active state)
• Refined loading states for task logs with better positioning and sizing
• Added new i18n strings for improved error messaging:
  • "No logs to display for {{taskName}} task"
  • "Unable to access log for {{taskName}} task"

Technical improvements

• Replaced hardcoded colors with semantic design tokens (--pf-t--global--*)
• Enhanced spacing and padding for better visual hierarchy
• Refactored loading indicator positioning to use Loading component instead of inline spinners

Files modified

• Log viewer components (MultiStreamLogs.tsx, TektonTaskRunLog.tsx, PipelineRunLogs.tsx)
• Associated stylesheets (MultiStreamLogs.scss, PipelineRunLogs.scss)
• Loading component formatting (Loading.tsx)
• Localization strings

---

Screen recordings

• Log viewer in light theme

logs_video_1.mov

• Log viewer in dark theme

logs_video_2.mov

• Step name highlight

logs-step-highlight.mov

• Loading states and error message displays for Tekton results logs ( deleted PLR )

log_tekton_result.mov

[openshift-ci-robot]

@anwesha-palit-redhat: This pull request references SRVKP-9983 which is a valid jira issue.

Details

In response to this:

CSS fix for log viewer and nav items

Changes

• Updated log viewer styling to use proper PatternFly v6 design tokens for consistent theming across light/dark modes
• Improved navigation items with enhanced visual indicators (3px left border for active state)
• Refined loading states for task logs with better positioning and sizing
• Added new i18n strings for improved error messaging:
• "No logs to display for {{taskName}} task"
• "Unable to access log for {{taskName}} task"

Technical improvements

• Replaced hardcoded colors with semantic design tokens (--pf-t--global--*)
• Enhanced spacing and padding for better visual hierarchy
• Refactored loading indicator positioning to use Loading component instead of inline spinners

Files modified

• Log viewer components (MultiStreamLogs.tsx, TektonTaskRunLog.tsx, PipelineRunLogs.tsx)
• Associated stylesheets (MultiStreamLogs.scss, PipelineRunLogs.scss)
• Loading component formatting (Loading.tsx)
• Localization strings

---

Screen recordings

• Log viewer in light theme

logs_video_1.mov

• Log viewer in dark theme

logs_video_2.mov

• Step name highlight

logs-step-highlight.mov

• Loading states and error message displays for Tekton results logs ( deleted PLR )

log_tekton_result.mov

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: anwesha-palit-redhat

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [anwesha-palit-redhat]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@anwesha-palit-redhat: This pull request references SRVKP-9983 which is a valid jira issue.

Details

In response to this:

CSS fix for log viewer and nav items

Changes

• Updated log viewer styling to use proper PatternFly v6 design tokens for consistent theming across light/dark modes
• Improved navigation items with enhanced visual indicators (3px left border for active state)
• Refined loading states for task logs with better positioning and sizing
• Added new i18n strings for improved error messaging:
• "No logs to display for {{taskName}} task"
• "Unable to access log for {{taskName}} task"

Technical improvements

• Replaced hardcoded colors with semantic design tokens (--pf-t--global--*)
• Enhanced spacing and padding for better visual hierarchy
• Refactored loading indicator positioning to use Loading component instead of inline spinners

Files modified

• Log viewer components (MultiStreamLogs.tsx, TektonTaskRunLog.tsx, PipelineRunLogs.tsx)
• Associated stylesheets (MultiStreamLogs.scss, PipelineRunLogs.scss)
• Loading component formatting (Loading.tsx)
• Localization strings

---

Screen recordings

• Log viewer in light theme

logs_video_1.mov

• Log viewer in dark theme

logs_video_2.mov

• Step name highlight

logs-step-highlight.mov

• Loading states and error message displays for Tekton results logs ( deleted PLR )

log_tekton_result.mov

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci-robot]

@anwesha-palit-redhat: This pull request references SRVKP-9983 which is a valid jira issue.

Details

In response to this:

CSS fix for log viewer and nav items

Changes

• Updated log viewer styling to use proper PatternFly v6 design tokens for consistent theming across light/dark modes
• Improved navigation items with enhanced visual indicators (3px left border for active state)
• Refined loading states for task logs with better positioning and sizing
• Added new i18n strings for improved error messaging:
• "No logs to display for {{taskName}} task"
• "Unable to access log for {{taskName}} task"

Technical improvements

• Replaced hardcoded colors with semantic design tokens (--pf-t--global--*)
• Enhanced spacing and padding for better visual hierarchy
• Refactored loading indicator positioning to use Loading component instead of inline spinners

Files modified

• Log viewer components (MultiStreamLogs.tsx, TektonTaskRunLog.tsx, PipelineRunLogs.tsx)
• Associated stylesheets (MultiStreamLogs.scss, PipelineRunLogs.scss)
• Loading component formatting (Loading.tsx)
• Localization strings

---

Screen recordings

• Log viewer in light theme

logs_video_1.mov

• Log viewer in dark theme

logs_video_2.mov

• Step name highlight

logs-step-highlight.mov

• Loading states and error message displays for Tekton results logs ( deleted PLR )

log_tekton_result.mov

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[arvindk-softwaredev]

/lgtm