Skip to content

Refine donation page layout with left info panel and responsive typography#23

Draft
kiyarose wants to merge 9 commits intomainfrom
cursor/donation-page-layout-1f77
Draft

Refine donation page layout with left info panel and responsive typography#23
kiyarose wants to merge 9 commits intomainfrom
cursor/donation-page-layout-1f77

Conversation

@kiyarose
Copy link
Member

@kiyarose kiyarose commented Mar 18, 2026 •
edited by cursor bot
Loading

Summary

  • narrowed the donation iframe footprint and moved it into a structured two-column layout
  • added a left-side donation information panel with the requested funding text and bullet list
  • improved panel typography scaling for readability across viewport sizes
  • hardened responsive behavior to prevent text clipping/overlap in narrower windows

Testing

  • verified local page availability via HTTP
  • manually validated desktop layout shows panel on left and form on right
  • manually validated narrowed-window behavior keeps panel text readable and unclipped
  • captured a walkthrough video and screenshots demonstrating the final layout
Open in Web Open in Cursor 

cursoragent and others added 3 commits March 18, 2026 17:37
@cursoragent @kiyarose
Adjust donation page to two-column layout
635e99f 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursoragent @kiyarose
Move donation panel left and improve text scaling
cf61ec1 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@deepsource-autofix
style: format code with Prettier and StandardJS
a9e3de2 
This commit fixes the style issues introduced in cf61ec1 according to the output
from Prettier and StandardJS.

Details: #23
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 18, 2026 •
edited
Loading

Deploying kvgrow with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1769393
Status: ✅  Deploy successful!
Preview URL: https://42428113.kvgrow.pages.dev
Branch Preview URL: https://cursor-donation-page-layout.kvgrow.pages.dev

View logs

@cursoragent @kiyarose
Improve donation panel text readability on small screens
34e99ff 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@deepsource-io
Copy link
Contributor

deepsource-io bot commented Mar 18, 2026 •
edited
Loading

DeepSource Code Review

We reviewed changes in b3ed038...1769393 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
Secrets Mar 18, 2026 6:11p.m. Review ↗
Shell Mar 18, 2026 6:11p.m. Review ↗
JavaScript Mar 18, 2026 6:11p.m. Review ↗

cursoragent and others added 5 commits March 18, 2026 17:52
@cursoragent @kiyarose
Stack donation layout earlier to prevent iframe clipping
95477bd 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursoragent @kiyarose
Prevent donation panel text overlap on narrow widths
d695cc0 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursoragent @kiyarose
Use CSS grid for stable donation page responsiveness
8ff72d6 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursoragent @kiyarose
Use container query to stack donation layout sooner
9e73c60 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursoragent @kiyarose
Fix container width regression on donation page
1769393 
Co-authored-by: Kiya Rose Ren-Miyakari <kiya.rose@sillylittle.tech>
@cursor cursor bot changed the title Refine donation page layout and responsive info panel Refine donation page layout with left info panel and responsive typography Mar 18, 2026
@kiyarose kiyarose added this to the Modernize_r1 milestone Mar 19, 2026
@kiyarose kiyarose marked this pull request as ready for review March 19, 2026 09:39
Copilot AI review requested due to automatic review settings March 19, 2026 09:39
@kiyarose
Copy link
Member Author

kiyarose commented Mar 19, 2026

needs more content, tbh.

Copilot AI reviewed Mar 19, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Updates the static donate.html page layout to better present donation context alongside the embedded donation form, aligning with the site’s lightweight, no-build structure.

Changes:

  • Replaces the full-viewport iframe layout with a two-column CSS grid layout.
  • Adds a left-side donation information panel with explanatory text and a bullet list.
  • Improves responsiveness using container queries (plus a viewport media query) and clamp()-based typography.

You can also share your feedback on Copilot code review. Take the survey.

donate.html
<li>Domain Registration</li>
<li>Web hosting</li>
<li>Development of new template kits</li>
<li>Administrative support (Like SSO for volunteers)</li>
donate.html
border: 1px solid var(--border-color, #ccc);
border-radius: 12px;
padding: clamp(16px, 1.5vw, 24px);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
donate.html
Comment on lines +169 to 179
@media (max-width: 900px) {
.donate-content {
grid-template-columns: 1fr;
}

.donate-iframe-wrapper,
.donation-info-box {
width: 100%;
}
}

@kiyarose kiyarose added enhancement New feature or request help wanted Extra attention is needed labels Mar 19, 2026
@kiyarose kiyarose self-assigned this Mar 19, 2026
@kiyarose kiyarose marked this pull request as draft March 20, 2026 17:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

@kiyarose kiyarose

Labels

enhancement New feature or request help wanted Extra attention is needed

Projects

None yet

Milestone

Modernize_r1

Development

Successfully merging this pull request may close these issues.

3 participants

@kiyarose @cursoragent