fix UI

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,22 @@ function rowProps(row: ProblemFiltered) {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.problem-list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(320px, 1fr);
+  align-items: start;
+  gap: 12px 16px;
+}
+
+.problem-list-toolbar :deep(.n-space) {
+  min-width: 0;
+}
+
+.problem-list-hitokoto {
+  justify-self: end;
+  width: 100%;
+  max-width: 720px;
+  min-width: 0;
+}
+</style>

src/shared/components/Hitokoto.vue

@@ -34,19 +34,31 @@ onMounted(receive)
 .hitokoto {
   cursor: pointer;
   height: 34px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: right;
 }
 
 .hitokoto .sentence {
-  max-width: 400px;
+  width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   word-break: break-all;
   white-space: nowrap;
+  line-height: 18px;
 }
 
 .hitokoto .from {
-  float: right;
+  width: 100%;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
   font-size: 12px;
+  line-height: 16px;
   color: grey;
 }
 </style>