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

Fix: overflowing images in callout

Author: shiffman

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']} />

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) {

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;
 }