Skip to content

[615] Bug: fix minor styles for widgets#121

Merged
yuramax merged 7 commits into
mainfrom
615-bug-fix-minor-styles-for-widgets
May 27, 2025
Merged

[615] Bug: fix minor styles for widgets#121
yuramax merged 7 commits into
mainfrom
615-bug-fix-minor-styles-for-widgets

Conversation

@yuramax
Copy link
Copy Markdown
Contributor

@yuramax yuramax commented May 26, 2025

This PR includes several style improvements for widgets:

  • Fixed Table widget link formatting and improved code style
  • Updated Table widget styles for better alignment and spacing
  • Enhanced testimonials styles for better responsiveness
  • Updated space for Vacancies List widget when no vacancies

@yuramax yuramax requested a review from killev as a code owner May 26, 2025 13:05
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 26, 2025

📝 Walkthrough

Walkthrough

This update introduces new CSS classes for layout and styling adjustments in table and testimonial components, modifies the table widget template to include a section class and link rendering logic, and updates styles for vacancies. No public API changes are made.

Changes

Files/Paths Change Summary
website/modules/asset/ui/src/scss/_table-widget.scss Adds .sf-table-section, updates layout, spacing, and border styles for table components.
website/modules/asset/ui/src/scss/_testimonials.scss Adds .cs_testimonials with responsive margin adjustments for testimonial containers.
website/modules/table-widget/views/widget.html Changes <section> class to include sf-table-section, adds link rendering logic within rows.
website/modules/asset/ui/src/scss/_vacancies.scss Adds responsive margin-top styles for .vacancy-card footer headings.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TableWidgetTemplate
    participant Data

    User->>TableWidgetTemplate: Render table widget
    TableWidgetTemplate->>Data: Retrieve widget rows
    loop For each row in Data
        TableWidgetTemplate->>TableWidgetTemplate: Render title and description
        alt row.linkTitle exists
            TableWidgetTemplate->>TableWidgetTemplate: Determine linkUrl by linkType
            TableWidgetTemplate->>User: Render link with attributes
        end
    end
Loading

Suggested reviewers

  • Anton-88
  • IhorMasechko
  • VitalyyP

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7cf49d8 and ed34e60.

📒 Files selected for processing (1)
  • website/modules/asset/ui/src/scss/_table-widget.scss (5 hunks)
✅ Files skipped from review due to trivial changes (1)
  • website/modules/asset/ui/src/scss/_table-widget.scss
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: security-scan
  • GitHub Check: e2e-tests
  • GitHub Check: lint
  • GitHub Check: unit-tests

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • 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

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Copy Markdown
Contributor

@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: 1

🧹 Nitpick comments (2)
website/modules/asset/ui/src/scss/_testimonials.scss (1)

215-223: Consistent class naming convention
The new .cs_testimonials class uses an underscore and diverges from the hyphenated BEM-style naming (e.g., .sf-testimonials-container). To maintain consistency across the codebase, consider renaming it to .cs-testimonials.

website/modules/table-widget/views/widget.html (1)

18-37: Enhance link URL assignment safety
Accessing row._page[0] or row._file[0] directly may throw undefined-index errors if those arrays are empty or absent. Guard these checks to prevent runtime issues, for example:

{% if row.linkType == 'page' and row._page and row._page | length > 0 %}
  {% set linkUrl = row._page[0]._url %}
{% endif %}

This ensures linkUrl is only set when the source array exists and contains elements.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9ec6a27 and 577d64d.

📒 Files selected for processing (3)
  • website/modules/asset/ui/src/scss/_table-widget.scss (5 hunks)
  • website/modules/asset/ui/src/scss/_testimonials.scss (1 hunks)
  • website/modules/table-widget/views/widget.html (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: e2e-tests
  • GitHub Check: unit-tests
  • GitHub Check: lint
  • GitHub Check: security-scan
🔇 Additional comments (5)
website/modules/table-widget/views/widget.html (1)

1-1: Section element styling class alignment
Including sf-table-section in the <section> now activates the new flex-column layout defined in _table-widget.scss, correctly applying the updated styles.

website/modules/asset/ui/src/scss/_table-widget.scss (4)

1-4: New section flex container
The .sf-table-section wrapper adopting display: flex; flex-direction: column; correctly scopes the section to use the updated layout. Implementation is sound.


9-11: Centering intro content
Adding align-self: center; width: 100%; to .sf-table-intro ensures it respects the parent container’s max-width and remains centered. This aligns with the intended design.


25-26: Horizontal centering of table rows
The new justify-content: center; on .sf-table centers rows in multi-column layouts at medium breakpoints, improving visual balance.


108-109: Consistent spacing for table links
The margin-top updates (24px / 32px at medium breakpoints) for .sf-table-link align with other components and enhance readability. Looks good.

Comment thread website/modules/asset/ui/src/scss/_table-widget.scss
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 26, 2025

🔍 Vulnerabilities of apostrophe-cms:test

📦 Image Reference apostrophe-cms:test
digestsha256:2304be5636ec52eebeec62147f3548314c64fea0329b47c1c808b39ad31a911f
vulnerabilitiescritical: 0 high: 3 medium: 0 low: 0
platformlinux/amd64
size284 MB
packages935
📦 Base Image node:23-alpine
also known as
  • 23-alpine3.21
  • 23.11-alpine
  • 23.11-alpine3.21
  • 23.11.1-alpine
  • 23.11.1-alpine3.21
digestsha256:169ee1b69bd3f5c7c8508a9919e8b367bba9dc7fa9a03097ec9f85d2e8179631
vulnerabilitiescritical: 0 high: 0 medium: 0 low: 0
critical: 0 high: 1 medium: 0 low: 0 async 0.9.2 (npm)

pkg:npm/async@0.9.2

high 7.8: CVE--2021--43138 OWASP Top Ten 2017 Category A9 - Using Components with Known Vulnerabilities

Affected range<2.6.4
Fixed version2.6.4, 3.2.2
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score1.061%
EPSS Percentile77th percentile
Description

A vulnerability exists in Async through 3.2.1 (fixed in 3.2.2), which could let a malicious user obtain privileges via the mapValues() method.

critical: 0 high: 1 medium: 0 low: 0 connect-multiparty 2.2.0 (npm)

pkg:npm/connect-multiparty@2.2.0

high 7.8: CVE--2022--29623 Unrestricted Upload of File with Dangerous Type

Affected range<=2.2.0
Fixed versionNot Fixed
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score0.117%
EPSS Percentile32nd percentile
Description

An arbitrary file upload vulnerability in the file upload module of Express Connect-Multiparty 2.2.0 allows attackers to execute arbitrary code via a crafted PDF file. NOTE: the Supplier has not verified this vulnerability report.

critical: 0 high: 1 medium: 0 low: 0 async 1.5.2 (npm)

pkg:npm/async@1.5.2

high 7.8: CVE--2021--43138 OWASP Top Ten 2017 Category A9 - Using Components with Known Vulnerabilities

Affected range<2.6.4
Fixed version2.6.4, 3.2.2
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score1.061%
EPSS Percentile77th percentile
Description

A vulnerability exists in Async through 3.2.1 (fixed in 3.2.2), which could let a malicious user obtain privileges via the mapValues() method.

@yuramax yuramax self-assigned this May 26, 2025
Copy link
Copy Markdown
Contributor

@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: 0

🧹 Nitpick comments (1)
website/modules/asset/ui/src/scss/_vacancies.scss (1)

82-92: DRY up duplicate .vacancy-card blocks
The new sibling selector styles for

.vacancy-card + .sf-vacancies_footer h2 { … }

are declared in a separate .vacancy-card block. For maintainability, merge this nested rule into the existing .vacancy-card block (around lines 13–32) so all .vacancy-card styles live in one place.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 577d64d and 39596c9.

📒 Files selected for processing (1)
  • website/modules/asset/ui/src/scss/_vacancies.scss (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: e2e-tests
  • GitHub Check: lint
  • GitHub Check: unit-tests
  • GitHub Check: security-scan
🔇 Additional comments (1)
website/modules/asset/ui/src/scss/_vacancies.scss (1)

101-101: Approve the margin reset for footer headings
Resetting the default margin-top on .sf-vacancies_footer h2 (to 0 0 8px and 0 0 32px at medium breakpoint) correctly delegates the top spacing to the sibling rule. This matches the intended responsive design.

Also applies to: 104-104

coderabbitai[bot]
coderabbitai Bot previously approved these changes May 26, 2025
Copy link
Copy Markdown
Contributor

@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: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39596c9 and 7cf49d8.

📒 Files selected for processing (1)
  • website/modules/asset/ui/src/scss/_vacancies.scss (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: sonarqube
  • GitHub Check: e2e-tests
  • GitHub Check: security-scan

Comment thread website/modules/asset/ui/src/scss/_vacancies.scss
Comment thread website/modules/asset/ui/src/scss/_vacancies.scss
coderabbitai[bot]
coderabbitai Bot previously approved these changes May 26, 2025
@sonarqubecloud
Copy link
Copy Markdown

Copy link
Copy Markdown
Contributor

@VitalyyP VitalyyP left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Copy Markdown
Contributor

@IhorMasechko IhorMasechko left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Copy Markdown
Collaborator

@killev killev left a comment

Choose a reason for hiding this comment

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

LGTM

@yuramax yuramax merged commit 2138b8d into main May 27, 2025
12 checks passed
@yuramax yuramax deleted the 615-bug-fix-minor-styles-for-widgets branch May 27, 2025 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants