fix: 移动端筛选面板高度自适应内容,不再撑满屏幕
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

从fixed top-24 bottom-24改为top-20 max-h-[80vh],
面板高度由内容决定,内容多时可滚动。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-03-29 00:20:56 +08:00
parent f25dffc7df
commit c81b7058c3

View File

@@ -1052,7 +1052,7 @@ export default function App() {
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="fixed inset-x-4 top-24 bottom-24 overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 sm:max-h-[80vh] bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4" className="fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4"
> >
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<h3 className="text-xs font-bold text-slate-800"> - </h3> <h3 className="text-xs font-bold text-slate-800"> - </h3>
@@ -1978,7 +1978,7 @@ export default function App() {
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="fixed inset-x-4 top-24 bottom-24 overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 sm:max-h-[80vh] bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800" className="fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800"
> >
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-gray-900"></h3> <h3 className="text-sm font-bold text-gray-900"></h3>
@@ -2270,7 +2270,7 @@ export default function App() {
initial={{ opacity: 0, y: 10, scale: 0.95 }} initial={{ opacity: 0, y: 10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 10, scale: 0.95 }} exit={{ opacity: 0, y: 10, scale: 0.95 }}
className="fixed inset-x-4 top-24 bottom-24 overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 sm:max-h-[80vh] bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800" className="fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 p-4 text-gray-800"
> >
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-bold text-gray-900"></h3> <h3 className="text-sm font-bold text-gray-900"></h3>