From 780ba5a18255e0cd5b64b66977246f36d0d864b0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 17:23:04 +0900
Subject: [PATCH] :art:

---
 packages/frontend/src/pages/search.note.vue | 32 ++++++++++++---------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 295918d706..2f7d01b197 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -26,22 +26,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="user">{{ i18n.ts._search.searchScopeUser }}</option>
 				</MkRadios>
 
-				<MkInput
-					v-if="searchScope === 'server'"
-					v-model="hostInput"
-					large
-					:placeholder="i18n.ts._search.serverHostPlaceholder"
-					@enter.prevent="search"
-				>
-					<template #label>{{ i18n.ts._search.pleaseEnterServerHost }}</template>
-					<template #prefix><i class="ti ti-server"></i></template>
-				</MkInput>
+				<div v-if="searchScope === 'server'" :class="$style.subOptionRoot">
+					<MkInput
+						v-model="hostInput"
+						:placeholder="i18n.ts._search.serverHostPlaceholder"
+						@enter.prevent="search"
+					>
+						<template #label>{{ i18n.ts._search.pleaseEnterServerHost }}</template>
+						<template #prefix><i class="ti ti-server"></i></template>
+					</MkInput>
+				</div>
 
-				<div v-if="searchScope === 'user'">
+				<div v-if="searchScope === 'user'" :class="$style.subOptionRoot">
 					<div :class="$style.userSelectLabel">{{ i18n.ts._search.pleaseSelectUser }}</div>
 					<div class="_gaps">
 						<div v-if="user == null" :class="$style.userSelectButtons">
-							<div v-if="$i != null" style="min-width: 30cqw;">
+							<div v-if="$i != null">
 								<MkButton
 									transparent
 									:class="$style.userSelectButton"
@@ -115,7 +115,7 @@ import { computed, ref, shallowRef, toRef } from 'vue';
 import type * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import { $i } from '@/account.js';
-import { host as localHost } from '@/config.js';
+import { host as localHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
@@ -316,6 +316,12 @@ async function search() {
 }
 </script>
 <style lang="scss" module>
+.subOptionRoot {
+	background: var(--MI_THEME-panel);
+	border-radius: var(--MI-radius);
+	padding: var(--MI-margin);
+}
+
 .userSelectLabel {
 	font-size: 0.85em;
 	padding: 0 0 8px;