From e92983dd805d355d11f1a830505ee24c518f8b16 Mon Sep 17 00:00:00 2001
From: aits2026 <wxdaochu@gmail.com>
Date: Fri, 6 Mar 2026 15:32:13 +0800
Subject: [PATCH] style(sns): compact jump date filter row

---
 src/components/Sns/SnsFilterPanel.tsx | 66 ++++++++++++++-------------
 src/pages/SnsPage.scss                | 15 ++++++
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/src/components/Sns/SnsFilterPanel.tsx b/src/components/Sns/SnsFilterPanel.tsx
index 5dbfad0..4b646b2 100644
--- a/src/components/Sns/SnsFilterPanel.tsx
+++ b/src/components/Sns/SnsFilterPanel.tsx
@@ -123,38 +123,40 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
 
                 {/* Date Widget */}
                 <div className="filter-widget date-widget">
-                    <div className="widget-header">
-                        <Calendar size={14} />
-                        <span>时间跳转</span>
-                    </div>
-                    <div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
-                        <button
-                            className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
-                            onClick={() => setShowJumpPopover(prev => !prev)}
-                        >
-                            <span className="date-text">
-                                {jumpTargetDate
-                                    ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
-                                    : '选择日期...'}
-                            </span>
-                            {jumpTargetDate && (
-                                <div
-                                    className="clear-date-btn"
-                                    onClick={(e) => {
-                                        e.stopPropagation()
-                                        setJumpTargetDate(undefined)
-                                    }}
-                                >
-                                    <X size={12} />
-                                </div>
-                            )}
-                        </button>
-                        <JumpToDatePopover
-                            isOpen={showJumpPopover}
-                            currentDate={jumpTargetDate || new Date()}
-                            onClose={() => setShowJumpPopover(false)}
-                            onSelect={(date) => setJumpTargetDate(date)}
-                        />
+                    <div className="date-widget-row">
+                        <div className="widget-header">
+                            <Calendar size={14} />
+                            <span>时间跳转</span>
+                        </div>
+                        <div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
+                            <button
+                                className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
+                                onClick={() => setShowJumpPopover(prev => !prev)}
+                            >
+                                <span className="date-text">
+                                    {jumpTargetDate
+                                        ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
+                                        : '选择日期...'}
+                                </span>
+                                {jumpTargetDate && (
+                                    <div
+                                        className="clear-date-btn"
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            setJumpTargetDate(undefined)
+                                        }}
+                                    >
+                                        <X size={12} />
+                                    </div>
+                                )}
+                            </button>
+                            <JumpToDatePopover
+                                isOpen={showJumpPopover}
+                                currentDate={jumpTargetDate || new Date()}
+                                onClose={() => setShowJumpPopover(false)}
+                                onSelect={(date) => setJumpTargetDate(date)}
+                            />
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/pages/SnsPage.scss b/src/pages/SnsPage.scss
index a3ee46a..7624101 100644
--- a/src/pages/SnsPage.scss
+++ b/src/pages/SnsPage.scss
@@ -1063,10 +1063,25 @@
     }
 
     /* Date Widget */
+    .date-widget-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+    }
+
+    .date-widget .widget-header {
+        margin-bottom: 0;
+        flex-shrink: 0;
+        min-width: 72px;
+    }
+
     .jump-calendar-anchor {
         position: relative;
         display: flex;
         align-items: center;
+        flex: 1;
+        min-width: 0;
         isolation: isolate;
         z-index: 20;