fix: persistent nav bar

src/components/Item/TextItem/Item.js

@@ -1,6 +1,7 @@
 import { RichTextParser, RichTextEditor } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { Divider, spacers } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -14,27 +15,19 @@ import {
 import { sGetSelectedDashboardItems } from '../../../reducers/selected.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import PrintItemInfo from '../ItemHeader/PrintItemInfo.js'
+import classes from './styles/TextItem.module.css'
 
-const style = {
-    textDiv: {
-        padding: '10px',
-        lineHeight: '16px',
-    },
-    textField: {
-        fontSize: '14px',
-        fontStretch: 'normal',
-        margin: '0 auto',
-        display: 'block',
-        lineHeight: '24px',
-    },
-    container: {
-        marginBottom: '20px',
-        marginTop: '20px',
-    },
+const parserTextStyle = {
+    padding: '10px',
+    fontSize: '14px',
+    fontStretch: 'normal',
+    margin: '0 auto',
+    display: 'block',
+    lineHeight: '16px',
 }
 
 const TextItem = (props) => {
-    const { item, dashboardMode, text, acUpdateDashboardItem } = props
+    const { item, dashboardMode, text, isFS, acUpdateDashboardItem } = props
 
     const onChangeText = (text) => {
         const updatedItem = {
@@ -46,11 +39,17 @@ const TextItem = (props) => {
     }
 
     const viewItem = () => {
-        const textDivStyle = Object.assign({}, style.textField, style.textDiv)
         return (
-            <div className="dashboard-item-content" style={style.container}>
-                <RichTextParser style={textDivStyle}>{text}</RichTextParser>
-            </div>
+            <>
+                <div
+                    className={cx(classes.container, 'dashboard-item-content')}
+                >
+                    <RichTextParser style={parserTextStyle}>
+                        {text}
+                    </RichTextParser>
+                </div>
+                {isFS && <div className={classes.fsControlsBuffer} />}
+            </>
         )
     }
 
@@ -77,12 +76,15 @@ const TextItem = (props) => {
     }
 
     const printItem = () => {
-        const textDivStyle = Object.assign({}, style.textField, style.textDiv)
         return (
             <>
                 {props.item.shortened ? <PrintItemInfo /> : null}
-                <div className="dashboard-item-content" style={style.container}>
-                    <RichTextParser style={textDivStyle}>{text}</RichTextParser>
+                <div
+                    className={cx('dashboard-item-content', classes.container)}
+                >
+                    <RichTextParser style={parserTextStyle}>
+                        {text}
+                    </RichTextParser>
                 </div>
             </>
         )
@@ -121,6 +123,7 @@ const mapStateToProps = (state, ownProps) => {
 TextItem.propTypes = {
     acUpdateDashboardItem: PropTypes.func,
     dashboardMode: PropTypes.string,
+    isFS: PropTypes.bool,
     item: PropTypes.object,
     text: PropTypes.string,
 }

src/components/Item/TextItem/styles/TextItem.module.css

@@ -0,0 +1,9 @@
+.container {
+    margin-block: 20px;
+    margin-block-start: 20px;
+}
+
+.fsControlsBuffer {
+    block-size: 48px;
+    inline-size: 100%;
+}

src/pages/view/ItemGrid.js

@@ -276,6 +276,12 @@ const ResponsiveItemGrid = () => {
             {Number.isInteger(fsItemIndex) && (
                 <div className={classes.fsControlsContainer}>
                     <div className={classes.fullscreenControls}>
+                        <button
+                            className={classes.exitButton}
+                            onClick={exitFullscreen}
+                        >
+                            <IconCross24 color={colors.white} />
+                        </button>
                         <button onClick={prevItem}>
                             <IconChevronLeft24 color={colors.white} />
                         </button>
@@ -285,9 +291,6 @@ const ResponsiveItemGrid = () => {
                         <button onClick={nextItem}>
                             <IconChevronRight24 color={colors.white} />
                         </button>
-                        <button onClick={exitFullscreen}>
-                            <IconCross24 color={colors.white} />
-                        </button>
                     </div>
                 </div>
             )}

src/pages/view/styles/ItemGrid.module.css

@@ -39,6 +39,7 @@
     inline-size: 100vw;
     display: flex;
     justify-content: center;
+    background-color: black;
 }
 .fullscreenControls {
     background: #202124;
@@ -50,9 +51,8 @@
 }
 
 .fullscreenControls button {
-    color: var(--colors-white);
-    background-color: #000;
-    background: #000;
+    color: white;
+    background-color: #1f2023;
     border-radius: 3px;
     border: none;
     inline-size: 32px;
@@ -70,3 +70,9 @@
     margin: 0 10px;
     user-select: none;
 }
+
+.exitButton {
+    position: absolute;
+    inset-block-end: 6px;
+    inset-inline-start: 6px;
+}