現在我們的系統已經順利部署到 Vercel 上，可能會迫不及待地用手機打開網址測試。但這時會發現一個尷尬的問題：原本在電腦螢幕上排列整齊的表單和清單，在手機狹窄的畫面上全部擠在一起，甚至破壞了原本的排版。因為在真實的健康照護情境中，使用者絕大多數是透過行動裝置來記錄用藥，所以我們必須將系統調整為「響應式網頁設計」(RWD)。

Tailwind CSS 採用的是「行動優先」(Mobile-First) 的設計邏輯。這代表我們預設寫的 class 樣式都是給手機看的，當螢幕變寬時，再透過加上 sm:（平板）、md:（小筆電）、lg:（桌機）等斷點前綴來改變排版。

我們先從新增用藥的表單著手優化。打開 src/components/AddMedicationForm.jsx，觀察原本表單輸入框的容器。為了讓它在手機上直向排列，而在電腦上橫向並排，我們只需要在最外層的表單元素上動點手腳。將原本可能寫死的 flex 樣式，改為預設以欄位方向 (flex-col) 排列，當螢幕大於 md 尺寸時再切換為橫向 (flex-row)。

Step 1：優化新增用藥表單
打開 src/components/AddMedicationForm.jsx。為了讓表單在手機上直向排列，而在電腦上橫向並排，我們將原本可能寫死的 flex 樣式，改為預設以欄位方向 (flex-col) 排列，當螢幕大於 md 尺寸時再切換為橫向 (md:flex-row)。
flex-col 讓手機版欄位變成直排往下疊；md:flex-row 讓平板/電腦版橫向並排。gap-4 用來保持元素之間的呼吸空間

w-full 讓按鈕在手機版寬度佔滿 100%；md:w-auto 讓電腦版按鈕寬度自動貼合內容，不再死板地拉長

Step 2：優化用藥清單的排版
接著處理清單。打開 src/components/MedicationList.jsx。
在手機上，如果藥物名稱太長，會跟右邊的按鈕擠在一起變形。我們透過 flex-col 讓單筆紀錄在手機呈現上下兩層，並加入 whitespace-nowrap 確保按鈕文字不會因為空間不足而變成直排。

寫完之後手機板的畫面排版就會讓畫面比較順暢