From 36e322fadc042f45ad0564c7dc2260621b1e7c00 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 3 May 2026 10:10:01 -0600
Subject: [PATCH] fix UI

---
 src/oj/problem/list.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/oj/problem/list.vue b/src/oj/problem/list.vue
index ede8e39..2845427 100644
--- a/src/oj/problem/list.vue
+++ b/src/oj/problem/list.vue
@@ -220,7 +220,7 @@ function rowProps(row: ProblemFiltered) {
 
 <template>
   <n-flex vertical size="large">
-    <n-flex justify="space-between">
+    <div class="problem-list-toolbar">
       <n-space>
         <n-form :show-feedback="false" inline label-placement="left">
           <n-form-item label="难度">
@@ -273,8 +273,8 @@ function rowProps(row: ProblemFiltered) {
           </n-form-item>
         </n-form>
       </n-space>
-      <Hitokoto v-if="isDesktop" />
-    </n-flex>
+      <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
+    </div>
     <n-collapse-transition :show="showTag">
       <n-flex>
         <n-tag
@@ -303,4 +303,21 @@ function rowProps(row: ProblemFiltered) {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.problem-list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px 16px;
+}
+
+.problem-list-toolbar :deep(.n-space) {
+  min-width: 0;
+}
+
+.problem-list-hitokoto {
+  justify-self: end;
+  width: min(400px, 30vw);
+  min-width: 0;
+}
+</style>