refine embedding page styling

[iceljc]

PR Type

Enhancement

---

Description

• Replace sveltestrap components with custom div styling

• Add embedding-container SCSS class with responsive layout

• Remove Card, CardBody, Col, Row component imports

• Implement dynamic height calculation using SCSS variables

---

Diagram Walkthrough

flowchart LR
  A["EmbeddingPage.svelte<br/>Remove sveltestrap imports"] --> B["Replace markup<br/>with custom div"]
  B --> C["Add embedding-container<br/>class reference"]
  C --> D["_agent.scss<br/>Define styling rules"]
  D --> E["Responsive layout<br/>with SCSS variables"]

Loading

File Walkthrough

	Relevant files
Enhancement	EmbeddingPage.svelte Replace sveltestrap components with custom div                      src/lib/common/embedding/EmbeddingPage.svelte Removed sveltestrap component imports (Card, CardBody, Col, Row) Replaced sveltestrap markup with simple div element Added class attribute referencing new embedding-container style Maintained htmlTagId prop for element identification +5/-12    _agent.scss Add embedding-container SCSS styling class                              src/lib/scss/custom/pages/_agent.scss Added new .embedding-container class with padding and height rules Implemented dynamic height calculation using SCSS variables ($header-height, $grid-gutter-width, $footer-height) Added responsive width and margin calculations for full-width layout Negative margins to extend container beyond grid boundaries +9/-0
Formatting	_topbar.scss Fix trailing whitespace formatting                                              src/lib/scss/custom/structure/_topbar.scss Minor formatting fix: removed trailing whitespace after closing brace +1/-1

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix layout calculation to prevent overflow Correct the width and horizontal margin calculations for the .embedding-container to properly offset parent padding and prevent horizontal overflow. src/lib/scss/custom/pages/_agent.scss [396-403] .embedding-container { padding: 0px; height: calc(100vh - #{$header-height} - #{$grid-gutter-width} - #{$footer-height}); - width: calc(100% + #{$grid-gutter-width} * 2); - margin-left: calc(-1 * (#{$grid-gutter-width} * 0.75 + #{$grid-gutter-width} * 0.5)); - margin-right: calc(-1 * (#{$grid-gutter-width} * 0.75 + #{$grid-gutter-width} * 0.5)); + width: calc(100% + #{$grid-gutter-width}); + margin-left: calc(-0.5 * #{$grid-gutter-width}); + margin-right: calc(-0.5 * #{$grid-gutter-width}); margin-bottom: calc(-1 * #{$footer-height}); } Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies and fixes a bug in the layout calculation for the new .embedding-container class, which would otherwise cause horizontal overflow and a broken UI.	Medium
General	Use direct binding and enhance accessibility Simplify the id attribute binding from string interpolation to direct binding and add role and aria-label attributes to the div for better accessibility. src/lib/common/embedding/EmbeddingPage.svelte [94-98] <div - id={`${htmlTagId}`} + id={htmlTagId} class="embedding-container" + role="region" + aria-label="Embedding Content" > </div> Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion improves code style by simplifying an attribute binding and enhances accessibility by adding appropriate role and aria-label attributes.	Low
More