Add link to media in carousel modal

src/app.css

@@ -525,12 +525,12 @@ a.mention span {
   opacity: 0;
 }
 
-button.carousel-button,
+:is(.button, button).carousel-button,
 button.carousel-dot {
   pointer-events: auto;
   font-weight: bold;
 }
-button.carousel-button[hidden] {
+:is(.button, button).carousel-button[hidden] {
   display: inline-block;
   opacity: 0;
   pointer-events: none;

src/components/status.jsx

@@ -1348,13 +1348,26 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
       </div>
       <div class="carousel-top-controls" hidden={!showControls}>
         <span />
-        <button
-          type="button"
-          class="carousel-button plain2"
-          onClick={() => onClose()}
-        >
-          <Icon icon="x" />
-        </button>
+        <span>
+          <a
+            href={
+              mediaAttachments[currentIndex]?.remoteUrl ||
+              mediaAttachments[currentIndex]?.url
+            }
+            target="_blank"
+            class="button carousel-button plain2"
+            title="Open original media in new window"
+          >
+            <Icon icon="popout" alt="Open original media in new window" />
+          </a>{' '}
+          <button
+            type="button"
+            class="carousel-button plain2"
+            onClick={() => onClose()}
+          >
+            <Icon icon="x" />
+          </button>
+        </span>
       </div>
       {mediaAttachments?.length > 1 && (
         <div class="carousel-controls" hidden={!showControls}>