Updated image preview styles to restrict the content to screen

bigbinary · Jan 31, 2025 · ffa6741 · ffa6741
1 parent 7eac0e8
commit ffa6741
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/src/styles/editor/editor-content.scss b/src/styles/editor/editor-content.scss
@@ -170,7 +170,9 @@
     font-weight: var(--neeto-editor-content-heading-font-weight);
 
     strong {
-      font-weight: var(--neeto-editor-content-heading-font-weight-bold) !important;
+      font-weight: var(
+        --neeto-editor-content-heading-font-weight-bold
+      ) !important;
     }
   }
 
@@ -235,7 +237,6 @@
     }
 
     &:hover {
-
       h1,
       h2,
       h3,
@@ -382,7 +383,7 @@
     }
   }
 
-  pre>code {
+  pre > code {
     font-size: var(--neeto-editor-content-code-font-size);
     background-color: transparent;
     border-width: 0;
@@ -402,8 +403,10 @@
     font-weight: var(--neeto-editor-font-medium);
     color: rgba(var(--neeto-editor-content-blockquote-color));
     border-left-width: var(--neeto-editor-content-blockquote-border-left-width);
-    border-left-color: rgba(var(--neeto-editor-content-blockquote-border-color));
-    quotes: "\201C" "\201D" "\2018" "\2019";
+    border-left-color: rgba(
+      var(--neeto-editor-content-blockquote-border-color)
+    );
+    quotes: "\201C""\201D""\2018""\2019";
     margin-bottom: var(--neeto-editor-content-blockquote-margin-bottom);
     padding-left: var(--neeto-editor-content-blockquote-padding-left);
 
@@ -412,11 +415,11 @@
       color: inherit;
     }
 
-    &>p::before {
+    & > p::before {
       content: "" !important;
     }
 
-    &>p::after {
+    & > p::after {
       content: "" !important;
     }
   }
@@ -664,11 +667,24 @@
     gap: 10px;
     flex-direction: column;
     max-width: 60vw;
+    max-height: 90vh;
 
-    &.image-loaded {
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      width: fit-content;
+      overflow: hidden;
+      object-fit: contain;
       padding: 10px;
+      background: rgb(var(--neeto-editor-white));
+    }
+
+    &.image-loaded {
       border-radius: 10px;
       opacity: 1;
+      background: transparent;
+      display: flex;
+      align-items: center;
     }
 
     &__caption {
@@ -706,4 +722,4 @@
       background-color: rgb(var(--neeto-editor-gray-300));
     }
   }
-}
+}