WEB-432-refactor(templates): align view template page with consistent UI pattern

[shubhamkumar9199]

Description

This pr improve the template view page now has the same look, feel, and behavior as other detail/view pages in the application, providing a consistent user experience throughout the system.
#{Issue Number}
WEB-432

Screenshots, if any

before:

after:

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Style
  • Reworked action area layout to improve button alignment and spacing while preserving buttons and permissions.
  • Adjusted container sizing and centering; increased card content padding for better presentation.
  • Introduced two-column responsive layout that collapses to one column on small screens.
  • Tuned text sizing, added a stronger emphasis style, field separators, and responsive padding for small viewports.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

Reorganizes the view-template component's action-area HTML and updates component SCSS: reduces container width, adds centered layout, mat-card-content padding, introduces a responsive two-column grid (.layout-row-wrap / .flex-50), and adjusts spacing/borders at 768px and 480px breakpoints.

Changes

Cohort / File(s)	Summary
View-template markup update src/app/templates/view-template/view-template.component.html	Moves action buttons into an inner row (.layout-row align-end gap-10px m-b-20), preserves buttons, icons, translations, and permissions; simplifies outer wrapper.
View-template styling changes src/app/templates/view-template/view-template.component.scss	Lowers container max-width to 32rem and centers at 85% width; adds mat-card-content padding; introduces .layout-row-wrap two-column (50%/50%) grid collapsing at ≤768px; defines .flex-50 with padding, flex layout, .mat-body-strong, bottom-border rules (except last/second-last), and responsive padding at ≤480px.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

• Check responsive behavior at 768px and 480px.
• Verify border selectors (:not(:last-child):not(:nth-last-child(2))) apply as intended.
• Confirm template bindings and permissions remained unchanged.

Possibly related PRs

• WEB-378-refactor: improve navigation component CSS #2805 — Introduces similar component-scoped CSS utilities and responsive grid rules (.layout-row-wrap, .flex-50, mat-card-content, .mat-body-strong).

Suggested reviewers

• gkbishnoi07
• alberto-art3ch

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main objective: refactoring the template view page to align with consistent UI patterns across the application, which matches the core purpose of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5e457db and 89a6be2.

📒 Files selected for processing (2)

• src/app/templates/view-template/view-template.component.html (1 hunks)
• src/app/templates/view-template/view-template.component.scss (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/app/templates/view-template/view-template.component.scss
• src/app/templates/view-template/view-template.component.html

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Lint, Build and Deploy

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1ef4de5 and 5e457db.

📒 Files selected for processing (2)

• src/app/templates/view-template/view-template.component.html (1 hunks)
• src/app/templates/view-template/view-template.component.scss (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/templates/view-template/view-template.component.scss
• src/app/templates/view-template/view-template.component.html

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Lint, Build and Deploy

🔇 Additional comments (4)

src/app/templates/view-template/view-template.component.html (2)

1-12: Button container layout looks good.

The restructured outer container preserves button functionality and permission guards while adjusting spacing. The gap reduction from 20px to 10px aligns with tighter visual consistency across the page.

---

14-44: Content grid structure is clean and maintainable.

The layout properly pairs labels with values, and the use of flex-50 divs with a two-column grid is a solid approach. The [innerHTML] binding for templateData.text should have appropriate sanitization in the component—ensure the component uses Angular's DomSanitizer or Content Security Policy to prevent XSS.

Verify that templateData.text is properly sanitized before rendering. Check the component class to confirm DomSanitizer is used if templateData.text contains user-generated content or external data.

src/app/templates/view-template/view-template.component.scss (2)

1-22: Container and grid layout are well-structured.

The centered container with 85% width and max-width 32rem provides responsive centering, and the two-column grid that collapses to single-column at 768px is a clean, maintainable approach that aligns with responsive design best practices.

---

40-43: Verify media query syntax compatibility.

The modern media query syntax (width <= 480px) on line 40 is CSS Media Queries Level 4. Along with the similar query at line 18, these should be verified to match your project's target browser support and CSS compilation target.

If your project needs to support older browsers, consider using the traditional min-width/max-width syntax:

-      @media (width <= 480px) {
+      @media (max-width: 479px) {
         padding: 1rem;
       }

Verify the same for the media query at line 18:

-      @media (width <= 768px) {
+      @media (max-width: 767px) {
         grid-template-columns: 100%;
       }

[alberto-art3ch]

Please see my comment, and just to think How we can create a component to do that and reuse this in the other views

[alberto-art3ch]

Sorry for this, but I think If we want to have this line, we should add in all the similar views, my suggestion is to remove and keep the same style with the other views.