Merge pull request #1032 from nature-of-code/fix/image-overflow

Fix: overflowing images in callout
nature-of-code · Oct 8, 2024 · 287528c · 287528c
2 parents 5c5c911 + 0a25414
commit 287528c
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 7 deletions.
diff --git a/src/components/Codesplit.js b/src/components/Codesplit.js
@@ -47,7 +47,7 @@ const Codesplit = (props) => {
 
   return (
     <div
-      className={`pt-0 ${props.className} ${isAnswerVisible ? 'is-answer-visible' : ''}`}
+      className={`overflow-visible pt-0 ${props.className} ${isAnswerVisible ? 'is-answer-visible' : ''}`}
     >
       <div className="flex items-start justify-between">
         <LanguageNameBadge language={props['data-code-language']} />

diff --git a/src/styles/callout.css b/src/styles/callout.css
@@ -1,5 +1,5 @@
 .callout {
-  @apply clear-both my-4 rounded bg-gray-100 py-4;
+  @apply clear-both my-4 overflow-y-auto rounded bg-gray-100 py-4;
 }
 
 .callout:not(.codesplit) {

diff --git a/src/styles/codesplit.css b/src/styles/codesplit.css
@@ -1,9 +1,4 @@
 /** codesplit div styles */
-
-.codesplit {
-  @apply my-4 rounded bg-gray-100 py-4;
-}
-
 .snip-above > .codesplit {
   @apply relative rounded-t-none border-t border-dashed border-gray-400;
 }