From cf40abe7ee0c5c54d0758d23e5ad3262349ad8b5 Mon Sep 17 00:00:00 2001
From: lzt404 <2596933790@qq.com>
Date: Sat, 26 Sep 2026 20:31:53 +0800
Subject: [PATCH] fix: improve browser mock toolbar and pricing layout

---
 src/mocks/browserMock.css | 11 +++++++++--
 src/styles.css            |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/mocks/browserMock.css b/src/mocks/browserMock.css
index 3d09925..247e903 100644
--- a/src/mocks/browserMock.css
+++ b/src/mocks/browserMock.css
@@ -1,7 +1,7 @@
 #browser-mock-toolbar {
   position: fixed;
-  top: 10px;
   right: 12px;
+  bottom: 12px;
   z-index: 2147483647;
   display: flex;
   align-items: center;
@@ -14,7 +14,15 @@
   box-shadow: 0 7px 24px rgb(0 0 0 / 22%);
   color: var(--text-primary, #f3f4f6);
   font: 12px/1.2 system-ui, sans-serif;
+  opacity: 0.82;
   backdrop-filter: blur(10px);
+  transition: opacity 160ms ease, box-shadow 160ms ease;
+}
+
+#browser-mock-toolbar:hover,
+#browser-mock-toolbar:focus-within {
+  opacity: 1;
+  box-shadow: 0 9px 28px rgb(0 0 0 / 28%);
 }
 
 #browser-mock-toolbar strong {
@@ -42,7 +50,6 @@
 
 @media (max-width: 760px) {
   #browser-mock-toolbar {
-    top: auto;
     right: 8px;
     bottom: 8px;
   }
diff --git a/src/styles.css b/src/styles.css
index 87a584a..25ad352 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -9758,6 +9758,7 @@ body.table-col-resizing * {
 .usage-pricing-panel {
   display: grid;
   min-width: 0;
+  align-content: start;
   gap: 14px;
   padding: 16px;
   border: 1px solid var(--theme-e3e1db);