```

feat(sidepanel): 优化时间戳工具页面布局与响应式样式

新增 datetime-box 和 input-group 容器类，用于优化时间戳转换和日期时间转换功能的
界面结构。调整 input-text、select-box 和 convert-button 的宽度及响应式行为，使其在
移动端设备上能够自适应显示。同时更新 HTML 结构以匹配新的 CSS 类名和布局方式，提升
用户体验与界面可读性。
```

sidepanel/index.css

@@ -35,8 +35,51 @@
   margin-left: auto;
 }
 
+.datetime-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .datetime-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.input-group {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 0.5rem 0;
+  min-width: 200px;
+}
+
+@media screen and (max-width: 768px) {
+  .input-group {
+    min-width: unset;
+    width: 100%;
+  }
+}
+
 .input-text {
-  width: 100%;
+  width: 200px;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+  .input-text {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.select-box {
+  width: 150px;
   padding: 0.5rem;
   margin: 0.5rem 0;
   box-sizing: border-box;
@@ -49,13 +92,16 @@
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
+  height: 2rem;
+  width: 4rem;
+  margin: 0.5rem 0;
+  align-self: flex-start;
 }
 
-.select-box {
-  width: 100%;
-  padding: 0.5rem;
-  margin: 0.5rem 0;
-  box-sizing: border-box;
+@media screen and (max-width: 768px) {
+  .convert-button {
+    width: 100%;
+  }
 }
 
 .content {
@@ -68,4 +114,4 @@
 
 .page.active {
   display: block;
-}
+}