css to put adjacent images/video into vertical alignment (#1387)

* css to put adjacent images/video into vertical alignment

* fix grids chrome

* even grid gap with safari support

* fixes for video and horizontal scroll

components/text.js

@@ -22,6 +22,7 @@ import { UNKNOWN_LINK_REL } from '@/lib/constants'
 import isEqual from 'lodash/isEqual'
 import UserPopover from './user-popover'
 import ItemPopover from './item-popover'
+import classNames from 'classnames'
 
 // Explicitely defined start/end tags & which CSS class from text.module.css to apply
 export const rehypeSuperscript = () => rehypeStyler('<sup>', '</sup>', styles.superscript)
@@ -264,7 +265,7 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
   const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
 
   return (
-    <div className={`${styles.text} ${show ? styles.textUncontained : overflowing ? styles.textContained : ''}`} ref={containerRef}>
+    <div className={classNames(styles.text, topLevel && styles.topLevel, show ? styles.textUncontained : overflowing && styles.textContained)} ref={containerRef}>
       <ReactMarkdown
         components={components}
         remarkPlugins={remarkPlugins}

components/text.module.css

@@ -106,6 +106,12 @@
     margin-bottom: .5rem;
     white-space: pre-wrap;
     word-break: break-word;
+    --grid-gap: 0.5rem;
+}
+
+.text.topLevel .p {
+    margin-bottom: 0.75rem;
+    --grid-gap: 0.75rem;
 }
 
 .text pre {
@@ -130,15 +136,53 @@
 
 .mediaContainer {
     display: block;
-    margin-top: .5rem;
     margin-bottom: .5rem;
-    width: 100%;
+    width: calc(100% - var(--grid-gap));
+    max-width: calc(100% - var(--grid-gap));
     height: auto;
     overflow: hidden;
     max-height: 25vh;
     aspect-ratio: var(--aspect-ratio);
 }
 
+.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) {
+    display: inline-block;
+    width: min-content;
+    max-width: calc(100% - var(--grid-gap));
+    margin-bottom: 0;
+}
+
+.mediaContainer ~ .mediaContainer {
+    display: inline-block;
+    width: min-content;
+    margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child {
+    margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
+    display: inline-block;
+    width: min-content;
+    max-width: calc(100% - var(--grid-gap));
+    margin-bottom: 0;
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child {
+    margin-right: var(--grid-gap);
+}
+
+.mediaContainer:has(+ .mediaContainer) {
+    display: inline-block;
+    width: min-content;
+    margin-right: var(--grid-gap);
+}
+
+.mediaContainer:first-child:has(+ .mediaContainer) {
+    margin-top: var(--grid-gap);
+}
+
 .mediaContainer img, .mediaContainer video {
     display: block;
     object-fit: contain;
@@ -146,6 +190,7 @@
     max-height: inherit;
     height: 100%;
     aspect-ratio: var(--aspect-ratio);
+    block-size: stretch;
 }
 
 .mediaContainer img {
@@ -155,7 +200,6 @@
 }
 
 .mediaContainer.topLevel {
-    margin-top: .75rem;
     margin-bottom: .75rem;
     max-height: 35vh;
 }
@@ -190,7 +234,7 @@ img.fullScreen {
     margin-bottom: 0;
 }
 
-.text li+li {
+.text li {
     margin-top: .25rem;
 }