diff --git a/assets/styling/shadcn.css b/assets/styling/shadcn.css
index 031b21a..36f4a3f 100644
--- a/assets/styling/shadcn.css
+++ b/assets/styling/shadcn.css
@@ -1468,10 +1468,25 @@
 }
 
 .ui-date-range-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+    flex: 1 1 auto;
     font-size: 0.85rem;
     color: hsl(var(--muted-foreground));
 }
 
+.ui-date-range-footer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
 .ui-date-range-shortcuts {
     display: flex;
     flex-wrap: wrap;
@@ -1483,8 +1498,8 @@
     display: flex;
     justify-content: flex-end;
     gap: 0.5rem;
-    width: 100%;
-    margin-top: 0.5rem;
+    flex-shrink: 0;
+    margin-left: auto;
 }
 
 .ui-date-range-shortcut,
diff --git a/src/components/ui/date_range_picker.rs b/src/components/ui/date_range_picker.rs
index 31cebf5..e493bb2 100644
--- a/src/components/ui/date_range_picker.rs
+++ b/src/components/ui/date_range_picker.rs
@@ -282,13 +282,6 @@ pub fn DateRangePicker(
                     "本月"
                 }
             }
-            div {
-                class: "ui-date-range-preview",
-                span { class: "ui-date-range-preview-primary", "{preview_primary_text}" }
-                for text in preview_secondary_text.iter() {
-                    span { class: "ui-date-range-preview-secondary", "{text}" }
-                }
-            }
             div {
                 class: "ui-date-range-calendars",
                 for offset in 0..2 {
@@ -372,47 +365,57 @@ pub fn DateRangePicker(
                 }
             }
             div {
-                class: "ui-date-range-controls",
-                Button {
-                    class: "ui-date-range-clear",
-                    variant: ButtonVariant::Ghost,
-                    size: ButtonSize::Sm,
-                    on_click: {
-                        let mut draft_signal = draft_range.clone();
-                        let mut hover_signal = hover_date.clone();
-                        move |_| {
-                            draft_signal.set(None);
-                            hover_signal.set(None);
-                        }
-                    },
-                    "清除"
+                class: "ui-date-range-footer",
+                div {
+                    class: "ui-date-range-preview",
+                    span { class: "ui-date-range-preview-primary", "{preview_primary_text}" }
+                    for text in preview_secondary_text.iter() {
+                        span { class: "ui-date-range-preview-secondary", "{text}" }
+                    }
                 }
-                Button {
-                    class: "ui-date-range-confirm",
-                    size: ButtonSize::Sm,
-                    disabled: confirm_disabled,
-                    on_click: {
-                        let mut value_signal = value.clone();
-                        let mut hover_signal = hover_date.clone();
-                        let draft_signal = draft_range.clone();
-                        let on_change = on_change_handler.clone();
-                        let popover_handle = popover_handle.clone();
-                        move |_| {
-                            let selection = draft_signal();
-                            if selection.is_none() && value_signal().is_none() {
-                                return;
+                div {
+                    class: "ui-date-range-controls",
+                    Button {
+                        class: "ui-date-range-clear",
+                        variant: ButtonVariant::Ghost,
+                        size: ButtonSize::Sm,
+                        on_click: {
+                            let mut draft_signal = draft_range.clone();
+                            let mut hover_signal = hover_date.clone();
+                            move |_| {
+                                draft_signal.set(None);
+                                hover_signal.set(None);
                             }
-                            value_signal.set(selection);
-                            if let Some(handler) = on_change.clone() {
-                                handler.call(selection);
+                        },
+                        "清除"
+                    }
+                    Button {
+                        class: "ui-date-range-confirm",
+                        size: ButtonSize::Sm,
+                        disabled: confirm_disabled,
+                        on_click: {
+                            let mut value_signal = value.clone();
+                            let mut hover_signal = hover_date.clone();
+                            let draft_signal = draft_range.clone();
+                            let on_change = on_change_handler.clone();
+                            let popover_handle = popover_handle.clone();
+                            move |_| {
+                                let selection = draft_signal();
+                                if selection.is_none() && value_signal().is_none() {
+                                    return;
+                                }
+                                value_signal.set(selection);
+                                if let Some(handler) = on_change.clone() {
+                                    handler.call(selection);
+                                }
+                                if let Some(mut handle) = popover_handle {
+                                    handle.state.set(false);
+                                }
+                                hover_signal.set(None);
                             }
-                            if let Some(mut handle) = popover_handle {
-                                handle.state.set(false);
-                            }
-                            hover_signal.set(None);
-                        }
-                    },
-                    "确定"
+                        },
+                        "确定"
+                    }
                 }
             }
         }