From d0a74226fd79d1232031205b79d3f57b678426ac Mon Sep 17 00:00:00 2001
From: zhangyuheng <zhangyuheng@lunadeer.cn>
Date: Fri, 27 Feb 2026 11:09:19 +0800
Subject: [PATCH] feat: Improve layout and styling of sponsor controls section
 with responsive adjustments

---
 sponsor.html | 41 +++++++++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/sponsor.html b/sponsor.html
index b25175d..6bdadab 100644
--- a/sponsor.html
+++ b/sponsor.html
@@ -190,22 +190,33 @@
             align-items: center;
             gap: 20px;
             margin-bottom: 40px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
         }
 
         .controls-header {
             display: flex;
             width: 100%;
-            justify-content: space-between;
+            justify-content: center;
             align-items: center;
             flex-wrap: wrap;
-            gap: 20px;
-            margin-bottom: 10px;
+            gap: 12px;
+            margin-bottom: 24px;
+        }
+        
+        /* Mobile adjustment for header */
+        @media (max-width: 600px) {
+            .controls-header {
+                flex-direction: column;
+            }
         }
 
         .cta-button {
+            height: 48px;  /* Match search input height */
+            padding: 0 24px;
             background-color: var(--text-primary);
             color: white;
-            padding: 10px 20px;
             border-radius: 99px;
             text-decoration: none;
             font-weight: 600;
@@ -216,6 +227,8 @@
             transition: all 0.2s;
             cursor: pointer;
             border: 1px solid transparent;
+            white-space: nowrap;
+            box-sizing: border-box; 
         }
 
         .cta-button:hover {
@@ -337,17 +350,19 @@
 
         .search-box {
             position: relative;
+            flex-grow: 0; 
             width: 100%;
-            max-width: 400px;
+            max-width: 320px;
         }
 
         .search-box input {
             width: 100%;
-            padding: 12px 20px 12px 44px;
+            height: 48px; /* Fixed height to match button */
+            padding: 0 20px 0 44px;
             border-radius: 99px;
             border: 1px solid rgba(0,0,0,0.1);
             background: white;
-            font-size: 16px;
+            font-size: 15px;
             outline: none;
             transition: all 0.2s;
         }
@@ -565,17 +580,19 @@
         
         <!-- Controls -->
         <div class="controls-section">
+            <h2 class="section-title" style="margin-bottom: 10px;">❤️ 赞助列表</h2>
+            
             <div class="controls-header">
-                <h2 class="section-title" style="margin-bottom: 0; text-align: left;">❤️ 赞助列表</h2>
+                <div class="search-box">
+                    <i class="fas fa-search"></i>
+                    <input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
+                </div>
+                
                 <button class="cta-button outline" id="open-sponsor-modal">
                     <i class="fas fa-heart"></i> 我要支持
                 </button>
             </div>
             
-            <div class="search-box">
-                <i class="fas fa-search"></i>
-                <input type="text" id="sponsor-search" placeholder="搜索赞助者姓名...">
-            </div>
             <div class="filter-tags" id="project-filters">
                 <button class="filter-tag active" data-project="all">全部</button>
                 <!-- JS injected filters -->