Fix alignment of items in footer

src/css/_layout.scss

@@ -61,10 +61,16 @@ body .root .content {
 
   footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-end;
     width: 100%;
+
+    .br {
+      width: 100%;
+    }
   }
+
   .row {
     height: 30px;
     display: flex;

src/css/pages/SurahStream.scss

@@ -48,10 +48,6 @@
   }
 }
 
-.justify-end {
-  justify-content: flex-end !important;
-}
-
 .content.theme.en {
   ul.body.stream {
     li.ayah {

src/js/pages/SurahStream.tsx

@@ -118,12 +118,11 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
           />
         )}
         {readyToRender && endOfStream && <RefreshIcon onClick={() => setStream([])} />}
-      </footer>
-      {readyToRender && soundOn && isStalled && (
-        <div className="row spinner justify-end">
+        <div className="br"></div>
+        {readyToRender && soundOn && isStalled && (
           <StalledIcon />
-        </div>
-      )}
+        )}
+      </footer>
     </div>
   );
 }