feat: improve responsive admin experience

templates/reference.html

@@ -9,21 +9,21 @@
     <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">技术导则参考文档</h1>
     <p class="mt-2 text-sm text-textSub">供水管道健康状态与剩余寿命评估系统</p>
   </div>
-  <a href="{{ url_for('main.reference_pdf') }}" target="_blank" rel="noopener" class="ui-btn ui-btn-primary">
+  <a href="{{ url_for('main.reference_pdf') }}" target="_blank" rel="noopener" class="ui-btn ui-btn-primary w-full sm:w-fit">
     <span class="material-symbols-outlined text-lg">open_in_new</span>
     新窗口查看
   </a>
 </div>
 
 <section class="overflow-hidden rounded-lg border border-line bg-white shadow-panel">
-  <div class="border-b border-line px-4 py-3 flex items-center justify-between">
+  <div class="flex flex-col gap-2 border-b border-line px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
     <div class="flex items-center gap-2 text-sm font-bold">
       <span class="material-symbols-outlined text-primary">picture_as_pdf</span>
       文档预览
     </div>
     <span class="text-xs text-textSub">浏览器不支持内嵌时可使用右上角按钮</span>
   </div>
-  <div class="h-[calc(100vh-230px)] min-h-[560px] bg-slate-100">
+  <div class="h-[65svh] min-h-[400px] bg-slate-100 sm:h-[calc(100vh-230px)] sm:min-h-[560px]">
     <object data="{{ url_for('main.reference_pdf') }}#toolbar=1&navpanes=0" type="application/pdf" class="h-full w-full">
       <div class="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
         <span class="material-symbols-outlined text-5xl text-primary">picture_as_pdf</span>