Resolve "Forum 3: OpenGraph-Bereich sollte deutlich kleiner"

Closes #5745

Merge request studip/studip!4391

3 files changed, 28 insertions, 7 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 1062fbc..72c66a9 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -553,6 +553,14 @@ $card-max-width: 300px;
         .opengraph-urls {
             margin-top: 10px;
             margin-bottom: 20px;
+            display: grid;
+            grid-template-columns: 40% 60%;
+
+            .og-preview {
+                &__description {
+                    -webkit-line-clamp: 2;
+                }
+            }
         }
     }
 
@@ -1584,6 +1592,14 @@ $card-max-width: 300px;
         .timeline-container {
             display: none;
         }
+
+        .post .opengraph-urls {
+            grid-template-columns: 1fr;
+
+            .og-preview__description {
+                -webkit-line-clamp: 3;
+            }
+        }
     }
 
     @media only screen and (max-width: 600px) {
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 080ca40..f0f17d4 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -656,7 +656,6 @@ input.allow-plaintext-toggle {
 
 .links-preview {
     &__item {
-        min-height: 150px;
         border: solid 1px $color--content-box-border;
         border-radius: 5px;
         overflow: hidden;
@@ -690,11 +689,12 @@ input.allow-plaintext-toggle {
 
 .og-preview {
     display: grid;
+    min-height: 100px;
     grid-template-columns: 1fr 2fr;
-    grid-gap: 10px;
+    gap: 5px;
 
     &__image-container {
-        max-height: 150px;
+        max-height: 120px;
 
         img {
             width: 100%;
@@ -705,11 +705,12 @@ input.allow-plaintext-toggle {
     }
 
     &__details {
-        padding: 20px 10px;
+        padding: 10px;
     }
 
     &__title {
-        color: $color--font-primary;
+        font-size: 12px;
+        font-weight: bold;
         margin: 0;
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -718,13 +719,17 @@ input.allow-plaintext-toggle {
     }
 
     &__description {
+        font-size: smaller;
         color: $color--font-inactive;
         margin-top: 5px;
-        font-size: small;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
+
+        &:hover {
+            color: inherit;
+        }
     }
 }
 
diff --git a/resources/vue/components/LinksPreview.vue b/resources/vue/components/LinksPreview.vue
index 67988ad..ecced7c 100644
--- a/resources/vue/components/LinksPreview.vue
+++ b/resources/vue/components/LinksPreview.vue
@@ -42,7 +42,7 @@ const currentLink = computed(() => props.links[currentIndex.value]);
                     <img :src="currentLink.image" :alt="currentLink.title" />
                 </div>
                 <div class="og-preview__details">
-                    <h4 class="og-preview__title">{{ currentLink.title }}</h4>
+                    <p class="og-preview__title">{{ currentLink.title }}</p>
                     <p class="og-preview__description">{{ currentLink.description }}</p>
                 </div>
             </a>