一、今天為什麼要做 UI 優化？

前幾天，我已經陸續完成 AI 避雷探針的主要功能，包括 Google Maps 店家搜尋、評論取得、Gemini AI 分析、會員登入、歷史報告，以及避雷報告下載。
功能慢慢變多之後，我開始發現一個問題：
功能可以正常運作，不代表網站看起來就一定好用。
尤其是 AI 分析結果的文字長度並不是固定的。
有時候一個欄位只有一兩行，有時候可能會出現一大段文字。如果直接把這些內容放進原本的九宮格報告版面，就很容易出現卡片高度不一致、文字超出範圍，甚至整個頁面被撐開的情況。
因此，今天主要把時間放在前端 UI 優化，重新調整報告頁面的 CSS，也順便統一首頁、報告頁與歷史紀錄頁的視覺風格。

二、第一個問題：卡片底部出現大片空白

我的 AI 避雷報告目前是以 3 × 3 九宮格 的方式呈現。
一開始，我為了避免文字太長把卡片撐破，使用了固定的高度限制：

.report-card p,
[id^="field-"] {
    max-height: 160px;
    overflow-y: auto;
}

當時看起來似乎解決了文字太長的問題，但實際測試後卻發現另一個問題。
CSS Grid 預設會讓同一列的 Grid Item 依照最高的卡片進行拉伸。

結果就變成：

卡片外框很高，但是文字內容被限制在 160px。
於是卡片底部就出現了一塊沒有內容的空白。

【實際操作圖 1：優化前的九宮格】

優化前的 AI 避雷報告，由於固定限制內容高度，造成部分卡片下方出現明顯空白。
這也讓我發現，單純設定 max-height 並不能真正解決 Grid 版面的高度問題。

三、第二個問題：拿掉高度限制後，整個頁面又被撐破

既然固定高度會造成空白，那我就嘗試把 max-height 移除。
結果新的問題馬上出現了。
當 AI 回傳的內容比較長時，卡片會跟著文字不斷變大。

【實際操作圖 2：卡片跟著文字不斷變大】

卡片內容變長之後，整個 Grid 被撐開。
而因為 body 又設定了 overflow: hidden，使用者也無法直接往下捲。
這時候我才發現：
真正需要控制的不是文字本身，而是 Grid、Card 與內容區域之間的高度分配。

四、解決方式：CSS Grid × Flexbox 雙層控制

最後，我重新調整整個九宮格的高度配置。
首先，在 Grid 的三列使用：

grid-template-rows: repeat(3, minmax(0, 1fr));

而不是單純使用：

grid-template-rows: repeat(3, 1fr);

minmax(0, 1fr) 可以讓每一列有明確的最小高度限制，避免內容把 Grid 行高無限撐開。

.dashboard-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-gap: 8px;
    min-height: 0;
}

接著，再讓每一張卡片使用 Flexbox：

.report-card {
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid #e1e4e8;

    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
    overflow: hidden;
}

內容區域則設定：

.report-card p:not(.note),
.report-card ul,
[id^="field-"]:not(.reference-level) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    line-height: 1.55;
}

這樣的結構可以讓：

Grid 負責控制整體九宮格高度

↓

Card 負責控制每張卡片

↓

Flex 讓標題與內容合理分配空間

↓

內容太長時，只讓內容區域出現捲軸

而不是把整個頁面撐破。

【實際操作圖 3：修正後的九宮格】

透過 CSS Grid 與 Flexbox 重新分配高度，讓卡片維持一致的版面，較長內容則在卡片內部滾動。

五、開始統一整個網站的視覺風格

除了報告頁之外，我也發現目前的：

• index.html
• report.html
• history.html

雖然功能不同，但如果每個頁面使用不同的背景、按鈕與導覽列，就會有一種「三個不同網站拼在一起」的感覺。
因此今天也一起整理全站的視覺風格。
目前統一的方向包括：

【實際操作圖 4：首頁】

統一首頁的背景、導覽列、Logo 與按鈕風格。

【實際操作圖 5：報告頁】

將 AI 分析結果以九宮格方式呈現，並統一卡片、文字與標籤樣式。

【實際操作圖 6：歷史紀錄頁】

歷史紀錄頁與首頁、報告頁採用相同的視覺設計，讓不同頁面之間保持一致。

六、今日心得

今天沒有新增大型功能，而是把前面已經完成的功能重新整理與優化。
從一開始的卡片底部空白，到移除高度限制後整個頁面被撐破，再到 AI 條列文字沒有正常換行，這些問題都讓我更了解實際前端開發與單純寫 HTML/CSS 的差異。
目前 AI 避雷探針已經不只是「可以跑的 AI Demo」，而是開始慢慢往一個完整網站的方向發展。