resolved mobile responsive bug (#673)

[harshita9104]

Which issue(s) this PR fixes:

Fixes #673

• What kind of change does this PR introduce?
  Bug fix

• What is the current behavior?

  • The tag toggle container overflows its parent container on smaller screens.
  • The case study text is too large, causing misalignment and layout issues.
  • The "POST YOUR CASE" button does not fit properly in its container.

• What is the new behavior (if this is a feature change)?

  • Ensured the tag toggle container stays within its parent using max-width: 100%.
  • Adjusted case study text sizes to fit within their containers.
  • Properly positioned the "POST YOUR CASE" button to prevent overflow.
  • Improved mobile responsiveness for better usability across different screen sizes.

• Does this PR introduce a breaking change?
  No, this PR does not introduce breaking changes.

• Screenshots of the changes made
  
  
  

Additional Notes:

• This PR improves UI responsiveness and fixes layout issues in the Case Studies page.
• All changes have been tested on desktop, tablet, and mobile devices to ensure proper rendering.

[kubeedge-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign kevin-wangzefeng after the PR has been reviewed.
You can assign the PR to them by writing /assign @kevin-wangzefeng in a comment when ready.

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

Needs approval from an approver in each of these files:

• OWNERS

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

[kubeedge-bot]

Welcome @harshita9104! It looks like this is your first PR to kubeedge/website 🎉

[harshita9104]

/assign @kevin-wangzefeng

[harshita9104]

Hello @kevin-wangzefeng , @anvithks , @edisonxiang ,

Kindly review the PR if any modifications are required please let me know!!

Thank you!

[harshita9104]

Hello @Shelley-BaoYue ,
I am harshita roonwal , CS undergraduate from India , I am actively contributing to Kubeedge website and I am planning to take part in LFX mentorship term 1 2025 .
I have 3+ years of experience in Javascript, website development and dealing with APIs, and I have worked with Atlan as Technical Consulting writer , I have opened few potential issues in Kubeedge website, and I am working on those issues currently.
Please review this PR: #674
/kind bug
This PR fixes a mobile responsiveness bug in the Case Studies page, ensuring that UI elements such as the "POST YOUR CASE" button, case study titles, and tag toggles are properly aligned and do not overflow their containers. The update enhances the overall layout, making it fully responsive across different screen sizes.
Fixes #673
Special notes for the reviewer:
Please verify the UI changes on both mobile and tablet views to ensure proper alignment.
Confirm that text elements wrap correctly without being cut off.
Ensure the tag toggle section adjusts properly on smaller screens.
Does this PR introduce a user-facing change?
NONE
Labels: kind/bug, size/XL

[harshita9104]

/assign @Shelley-BaoYue

[Shelley-BaoYue]

Overall looks good! Thanks for your contributions!
/lgtm

[TenzDelek]

why comments are pushed? @harshita9104

[harshita9104]

Sure will remove them thanks for review!!

[TenzDelek]

my pleasure