알림목록 그리드형 표시 오류 수정

frontend/src/components/TradeNotificationListPage.tsx

@@ -651,11 +651,14 @@ export const TradeNotificationListPage: React.FC<Props> = ({
                   'vl-scroll',
                   `tnl-grid--cols-${gridCols}`,
                 ].join(' ')}
+                style={{ ['--tnl-grid-cols' as string]: gridCols }}
+                rowClassName="vl-grid-row tnl-grid-row"
                 items={sorted}
                 columns={gridCols}
                 estimateRowSize={300}
                 rowGap={14}
                 measureDynamic
+                remeasureKey={gridCols}
                 overscan={2}
                 getItemKey={item => item.id}
                 role="list"

frontend/src/styles/tradeNotificationList.css

@@ -774,6 +774,52 @@
   flex-shrink: 0;
 }
 
+/* 상세 · 차트 · 매매 — 동일 세그먼트 버튼 */
+.tnl-summary-card-actions .tnl-row-action,
+.tnl-summary-card-actions .tnl-row-chart,
+.tnl-summary-card-actions .tnl-row-trade {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 14px;
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.tnl-summary-card-actions .tnl-row-action {
+  border-radius: 6px 0 0 6px;
+}
+
+.tnl-summary-card-actions .tnl-row-chart,
+.tnl-summary-card-actions .tnl-row-trade {
+  margin-left: -1px;
+  border-left: none;
+}
+
+.tnl-summary-card-actions .tnl-row-trade {
+  border-radius: 0 6px 6px 0;
+}
+
+.tnl-summary-card-actions:not(:has(.tnl-row-trade)) .tnl-row-chart {
+  border-radius: 0 6px 6px 0;
+}
+
+.tnl-summary-card-actions .tnl-row-action:hover,
+.tnl-summary-card-actions .tnl-row-chart:hover,
+.tnl-summary-card-actions .tnl-row-trade:hover {
+  background: var(--bg4);
+  color: var(--text);
+  z-index: 1;
+}
+
 .tnl-row-report {
   display: inline-flex;
   align-items: center;
@@ -1338,16 +1384,11 @@
   container-name: tnl-grid-wrap;
 }
 
-ul.tnl-list.tnl-list--grid {
+.tnl-list.tnl-list--grid {
   flex: 1;
   min-height: 0;
   width: 100%;
-  display: grid;
+  display: block;
-  flex-direction: unset;
-  grid-auto-rows: auto;
-  gap: 14px;
-  align-content: start;
-  align-items: start;
   list-style: none;
   margin: 0;
   padding: 4px 4px 16px;
@@ -1357,23 +1398,32 @@ ul.tnl-list.tnl-list--grid {
   -webkit-overflow-scrolling: touch;
 }
 
+/* VirtualGridScroll 행 단위 n열 배치 */
+.tnl-grid-row {
+  display: grid;
+  grid-template-columns: repeat(var(--tnl-grid-cols, 2), minmax(0, 1fr));
+  gap: 14px;
+  align-items: start;
+  width: 100%;
+}
+
 @container tnl-grid-wrap (max-width: 640px) {
-  ul.tnl-list.tnl-list--grid {
+  .tnl-list-wrap--grid .tnl-grid-row {
     grid-template-columns: minmax(0, 1fr) !important;
   }
 }
 
 @container tnl-grid-wrap (max-width: 960px) {
-  ul.tnl-list.tnl-list--grid.tnl-grid--cols-3,
+  .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-3 .tnl-grid-row,
-  ul.tnl-list.tnl-list--grid.tnl-grid--cols-4,
+  .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-4 .tnl-grid-row,
-  ul.tnl-list.tnl-list--grid.tnl-grid--cols-5 {
+  .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-5 .tnl-grid-row {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 }
 
 @container tnl-grid-wrap (max-width: 1200px) {
-  ul.tnl-list.tnl-list--grid.tnl-grid--cols-4,
+  .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-4 .tnl-grid-row,
-  ul.tnl-list.tnl-list--grid.tnl-grid--cols-5 {
+  .tnl-list-wrap--grid .tnl-list--grid.tnl-grid--cols-5 .tnl-grid-row {
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }
 }