full-width images and videos on mobile

src/index.css

@@ -52,7 +52,6 @@ img, video {
   white-space: pre-wrap;
   overflow-wrap: break-word;
   word-break: break-word;
-  overflow: hidden;
 }
 
 /** Scroll bar settings **/
@@ -73,3 +72,13 @@ img, video {
   @apply bg-neutral-600;
   @apply rounded-md;
 }
+
+.full-width-note > div > img, .full-width-note > div > video {
+  @apply -mx-2 md:mx-0;
+  max-width: 100vw;
+  @apply rounded-none md:rounded-sm;
+}
+
+.full-width-note > iframe {
+  width: 100vw;
+}

src/js/components/embed/Image.tsx

@@ -16,14 +16,12 @@ const Image: Embed = {
       setShowModal(true);
     };
     return (
-      <div>
-        <div className="relative w-full overflow-hidden object-contain my-2">
-          <SafeImg
-            onClick={onClick}
-            className="rounded max-h-[70vh] md:max-h-96 max-w-full cursor-pointer"
-            src={match}
-          />
-        </div>
+      <div className="flex justify-center md:justify-start">
+        <SafeImg
+          onClick={onClick}
+          className="my-2 rounded max-h-[70vh] md:max-h-96 max-w-full cursor-pointer"
+          src={match}
+        />
         <Show when={showModal}>
           <Modal onClose={() => setShowModal(false)}>
             <SafeImg className="rounded max-h-[90vh] max-w-[90vw]" src={match} />

src/js/components/embed/Video.tsx

@@ -4,9 +4,9 @@ const Video: Embed = {
   regex: /(https?:\/\/.*\.(?:mp4|webm|ogg|mov)(?:\?\S*)?)/gi,
   settingsKey: 'enableVideo',
   component: ({ match }) => (
-    <div className="relative w-full overflow-hidden object-contain my-2">
+    <div className="relative w-full object-contain my-2">
       <video
-        className="rounded max-h-[70vh] md:max-h-96 max-w-full"
+        className="rounded max-h-[70vh] md:max-h-96"
         src={match}
         controls
         muted

src/js/components/events/note/Content.tsx

@@ -82,7 +82,7 @@ const Content = ({ standalone, isQuote, fullWidth, asInlineQuote, event, meta })
   }
 
   return (
-    <div className="flex-grow">
+    <div className={`flex-grow`}>
       <Author
         standalone={standalone}
         event={event}
@@ -97,7 +97,11 @@ const Content = ({ standalone, isQuote, fullWidth, asInlineQuote, event, meta })
         <Torrent torrentId={meta.torrentId} autopause={!standalone} />
       </Show>
       <Show when={text?.length > 0}>
-        <div className={`preformatted-wrap pb-1 ${emojiOnly && 'text-2xl'}`}>
+        <div
+          className={`preformatted-wrap pb-1 ${emojiOnly && 'text-2xl'} ${
+            fullWidth ? 'full-width-note' : ''
+          } ${asInlineQuote ? 'inline-quote' : ''}`}
+        >
           <HyperText event={event}>{text}</HyperText>
           <Show when={translatedText}>
             <p>