릴리스: v0.1.15 다운로드와 반응형 UI 보정

frontend/src/views/AdminView.vue

@@ -497,12 +497,10 @@ function fmt(ts) {
               <button class="btn btn--ghost toolbar__button" @click="submitCustomItemSearch">검색</button>
               <select :value="customItemLimit" class="select toolbar__select" @change="changeCustomItemLimit(Number($event.target.value))">
                 <option :value="50">50개씩 보기</option>
-                <option :value="200">200개씩 보기</option>
+                <option :value="100">100개씩 보기</option>
               </select>
             </div>
 
-            <div class="hint">현재 목록은 사용자 커스텀 이미지 전용입니다. 여기서 보는 항목은 게임 기본 아이템 삭제와 연결되지 않아요.</div>
-
             <div v-if="!customItems.length" class="hint">조건에 맞는 커스텀 아이템이 없어요.</div>
             <div v-else class="customItemGrid">
               <article v-for="item in customItems" :key="item.id" class="customItemCard">
@@ -726,6 +724,7 @@ function fmt(ts) {
   margin-top: 0;
 }
 .btn {
+  font-size: 12px;
   margin-top: 12px;
   padding: 10px 12px;
   border-radius: 12px;
@@ -751,9 +750,6 @@ function fmt(ts) {
 .btn--ghost {
   background: rgba(255, 255, 255, 0.03);
 }
-.btn--small {
-  width: 100%;
-}
 .detailHead {
   display: flex;
   gap: 12px;
@@ -866,7 +862,7 @@ function fmt(ts) {
 .customItemGrid {
   margin-top: 14px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 }
 .customItemCard {
@@ -874,27 +870,39 @@ function fmt(ts) {
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.04);
   overflow: hidden;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px;
+  min-width: 0;
 }
 .customItemCard__image {
-  width: min(100%, 150px);
+  width: clamp(88px, 22vw, 150px);
+  flex: 0 1 150px;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   display: block;
-  margin: 12px auto 0;
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.18);
 }
 .customItemCard__body {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 6px;
-  padding: 12px;
+  min-width: 0;
+  flex: 1 1 auto;
 }
 .customItemCard__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   font-weight: 900;
 }
 .customItemCard__meta {
   opacity: 0.72;
   font-size: 13px;
+  min-width: 0;
+  overflow-wrap: anywhere;
   word-break: break-word;
 }
 .pager {
@@ -979,5 +987,12 @@ function fmt(ts) {
   .userList {
     grid-template-columns: 1fr;
   }
+  .customItemCard {
+    align-items: stretch;
+  }
+  .customItemCard__image {
+    width: clamp(72px, 28vw, 120px);
+    flex-basis: 120px;
+  }
 }
 </style>