(core) Adds current page name to the bottom bar [narrow screen]

Test Plan: Tested Manually, behave well also for long page name.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2702

app/client/ui/PagePanels.ts

@@ -27,6 +27,7 @@ export interface PageContents {
   onResize?: () => void;          // Callback for when either pane is opened, closed, or resized.
   testId?: TestId;
   optimizeNarrowScreen?: boolean;  // If true, show an optimized layout when screen is narrow.
+  contentBottom?: DomArg;
 }
 
 export function pagePanels(page: PageContents) {
@@ -136,7 +137,7 @@ export function pagePanels(page: PageContents) {
            cssPanelOpenerNarrowScreenBtn.cls('-open', left.panelOpen)
          )
         ),
-        dom('div', cssFlexSpacer.cls('')),
+        page.contentBottom,
         (!right || right.hideOpener ? null :
          cssPanelOpenerNarrowScreenBtn(
            cssPanelOpenerNarrowScreen(
@@ -165,9 +166,6 @@ const cssVBox = styled('div', `
 const cssHBox = styled('div', `
   display: flex;
 `);
-const cssFlexSpacer = styled('div', `
-  flex-grow: 1;
-`);
 const cssPageContainer = styled(cssHBox, `
   position: absolute;
   isolation: isolate; /* Create a new stacking context */
@@ -283,6 +281,8 @@ const cssBottomFooter = styled ('div', `
   z-index: 20;
   display: flex;
   flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   padding: 8px 16px;
   position: absolute;
   bottom: 0;