Address some layout issues with odd content spacing on mobile, and footer position (#3022)

* - set vars for player container height and status bar height
- use them to calculate mobile top spacing to adjust for tab content positioning

* give main content section a min height, place footer absolutely at bottom; rm all the fixed footer styling

* cleanup; restructure tabbed display logic and css a bit

* Prettified Code!

* cleanup

* fix(story): footer story needs to be wrapped in RecoilRoot if it is to use Recoil

* revert adding footer to mobile about section

* prevent double scrolling

---------

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/ui/Content/MobileContent.tsx

@@ -137,10 +137,13 @@ export const MobileContent: FC<MobileContentProps> = ({
         <ComponentErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
       )}
     >
-      <div className={classNames([styles.lowerSectionMobile, online && styles.online])}>
-        {items.length > 1 && <Tabs defaultActiveKey="0" items={items} />}
-      </div>
-      <div className={styles.mobileNoTabs}>{items.length <= 1 && aboutTabContent}</div>
+      {items.length > 1 ? (
+        <div className={classNames([styles.lowerSectionMobileTabbed, online && styles.online])}>
+          <Tabs defaultActiveKey="0" items={items} />
+        </div>
+      ) : (
+        <div className={styles.lowerSectionMobileNoTabs}>{aboutTabContent}</div>
+      )}
     </ErrorBoundary>
   );
 };