From f1fb9a051c5eb552447eda306135eb327890ecd3 Mon Sep 17 00:00:00 2001
From: kim365my <kim365my@knou.ac.kr>
Date: Fri, 5 Apr 2024 20:44:28 +0900
Subject: [PATCH] Update styles.css

---
 styles.css | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/styles.css b/styles.css
index 7b77d33..a20fd82 100644
--- a/styles.css
+++ b/styles.css
@@ -12,6 +12,8 @@ a:has(.openGraphPreview) {
     padding-right: 0;
     text-decoration: none;
     background-image: none;
+    container-name: openGraphPreview;
+    container-type: inline-size;
 }
 a:has(.openGraphPreview):hover {
     text-decoration: none;
@@ -20,23 +22,21 @@ a:has(.openGraphPreview):hover {
     height: 100%;
     display: flex;
     flex-direction: column;
+    flex-wrap: nowrap;
     gap: 8px;
     border: var(--cards-border-width) solid var(--background-modifier-border);
     background: none;
     color: var(--text-normal);
     text-decoration: none;
     background: none;
+
 }
 .openGraphPreview:hover {
     text-decoration: none; 
     color: var(--text-normal);
 }
 .openGraphPreview .se-oglink-thumbnail {
-    flex-shrink: 0;
     width: 100%;
-
-    height: initial;
-    overflow: hidden;
 }
 .openGraphPreview .se-oglink-thumbnail-resource {
     height: 100%;
@@ -44,10 +44,7 @@ a:has(.openGraphPreview):hover {
     border-radius: 0 !important;
 }
 .openGraphPreview .se-oglink-info-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 8px;
+    width: min-content;
     overflow: auto;
     padding: var(--size-4-3) var(--size-4-2);
 }
@@ -88,7 +85,7 @@ a:has(.openGraphPreview):hover {
     width: 100%;
 }
 
-@media screen and (min-width: 1000px) {
+@container openGraphPreview (width > 400px) {
     .openGraphPreview {
         flex-direction: row;
     }