Update app.css

app.css

@@ -72,74 +72,75 @@ footer, .footer, div[class*="footer"], #footer {
     min-height: 300px !important;
 }
 
-/* Setting 버튼 컨테이너 */
-.setting-buttons-container {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 1000;
+/* Setting 버튼 관련 스타일 수정 */
+.setting-buttons-row {
     padding: 10px;
+    margin-bottom: 10px;
+    background: transparent;
+    position: relative;
+    z-index: 1000;
 }
 
-/* Examples 섹션 */
-.examples-container {
+/* Examples 섹션 스타일 수정 */
+.examples-section {
     margin-top: 24px;
     padding: 0 24px;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.examples-section .ant-row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -8px;
+}
+
+.examples-section .ant-col {
+    padding: 0 8px;
+    margin-bottom: 16px;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+}
+
+.examples-section .ant-card {
+    height: 100%;
+    margin-bottom: 0;
+}
+
+.examples-section .ant-card-meta {
+    padding: 12px;
 }
 
+/* 우측 패널 스타일 수정 */
 .right_panel {
     position: relative;
     min-height: 600px;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 60px;  /* Setting 버튼을 위한 여백 */
 }
 
 .html_content {
     height: 100%;
 }
 
-/* 반응형 그리드를 위한 미디어 쿼리 */
+/* 반응형 레이아웃을 위한 미디어 쿼리 */
 @media (max-width: 768px) {
-    .examples-container .ant-col {
+    .examples-section .ant-col {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {
-    .examples-container .ant-col {
+    .examples-section .ant-col {
         flex: 0 0 50%;
         max-width: 50%;
     }
 }
 
-@media (min-width: 1201px) {
-    .examples-container .ant-col {
-        flex: 0 0 33.333333%;
-        max-width: 33.333333%;
-    }
-}
-
-/* Examples 카드 스타일링 */
-.examples-container .ant-card {
-    margin-bottom: 16px;
-    height: 100%;
-}
-
-.examples-container .ant-card-meta {
-    padding: 12px;
-}
-
-/* Setting 버튼 스타일링 */
-.setting-buttons-container .ant-btn {
-    margin-left: 8px;
-}
-
-/* 전체 레이아웃 조정 */
-.ant-row {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-}
-
 .main-content {
     margin-bottom: 24px;
 }