From cfe66a2c0b1b032a5f0309c1bf1790822b5620e2 Mon Sep 17 00:00:00 2001
From: Alvaro <110414366+alvaro-signal@users.noreply.github.com>
Date: Mon, 26 Sep 2022 18:49:18 -0600
Subject: [PATCH] Re-arranged story viewer components to render meta above
 arrow-buttons

---
 ts/components/StoryViewer.tsx | 45 +++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 6bc999b4f..f4f67a570 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -550,6 +550,30 @@ export const StoryViewer = ({
               />
             )}
           </div>
+
+          <div className="StoryViewer__protection StoryViewer__protection--bottom" />
+
+          {canNavigateRight && (
+            <button
+              aria-label={i18n('forward')}
+              className={classNames(
+                'StoryViewer__arrow StoryViewer__arrow--right',
+                {
+                  'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
+                }
+              )}
+              onClick={() =>
+                viewStory({
+                  storyId: story.messageId,
+                  storyViewMode,
+                  viewDirection: StoryViewDirectionType.Next,
+                })
+              }
+              onMouseMove={() => setArrowToShow(Arrow.Right)}
+              type="button"
+            />
+          )}
+
           <div className="StoryViewer__meta">
             {caption && (
               <div className="StoryViewer__caption">
@@ -740,27 +764,6 @@ export const StoryViewer = ({
               )}
             </div>
           </div>
-          {canNavigateRight && (
-            <button
-              aria-label={i18n('forward')}
-              className={classNames(
-                'StoryViewer__arrow StoryViewer__arrow--right',
-                {
-                  'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
-                }
-              )}
-              onClick={() =>
-                viewStory({
-                  storyId: story.messageId,
-                  storyViewMode,
-                  viewDirection: StoryViewDirectionType.Next,
-                })
-              }
-              onMouseMove={() => setArrowToShow(Arrow.Right)}
-              type="button"
-            />
-          )}
-          <div className="StoryViewer__protection StoryViewer__protection--bottom" />
           <button
             aria-label={i18n('close')}
             className="StoryViewer__close-button"