fix: styling fixes for List items

dhis2 · Nov 21, 2024 · fd265f9 · fd265f9
1 parent b5793b6
commit fd265f9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
@@ -1,6 +1,7 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Divider, IconFileDocument16, colors, spacers } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -22,7 +23,7 @@ const getContentItems = (item) =>
             array.findIndex((el) => el.id === item.id) === index
     )
 
-const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
+const ListItem = ({ item, dashboardMode, removeItem, updateItem, isFS }) => {
     const { baseUrl } = useConfig()
     const contentItems = getContentItems(item)
 
@@ -75,7 +76,11 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
             />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
             <div className="dashboard-item-content">
-                <ul className={classes.list}>
+                <ul
+                    className={cx(classes.list, {
+                        [classes.isFS]: isFS,
+                    })}
+                >
                     {contentItems.map((contentItem) => (
                         <li className={classes.item} key={contentItem.id}>
                             <span className={classes.itemContent}>
@@ -86,12 +91,14 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
                     ))}
                 </ul>
             </div>
+            {isFS && <div className={classes.fsControlsBuffer} />}
         </>
     )
 }
 
 ListItem.propTypes = {
     dashboardMode: PropTypes.string,
+    isFS: PropTypes.bool,
     item: PropTypes.object,
     removeItem: PropTypes.func,
     updateItem: PropTypes.func,

diff --git a/src/components/Item/ListItem/Item.module.css b/src/components/Item/ListItem/Item.module.css
@@ -34,3 +34,13 @@
     outline: none;
     color: var(--colors-red800);
 }
+
+.fsControlsBuffer {
+    block-size: 40px;
+    inline-size: 100%;
+}
+
+.isFS {
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
+}
diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
@@ -14,6 +14,7 @@
 .react-grid-item.edit,
 .react-grid-item.EVENT_VISUALIZATION,
 .react-grid-item.RESOURCES,
+.react-grid-item.REPORTS,
 .react-grid-item.TEXT,
 .react-grid-item.MESSAGES,
 .react-grid-item.APP {
@@ -93,6 +94,7 @@
 
 .react-grid-item.edit .dashboard-item-content,
 .react-grid-item.RESOURCES .dashboard-item-content,
+.react-grid-item.REPORTS .dashboard-item-content,
 .react-grid-item.TEXT .dashboard-item-content,
 .react-grid-item.MESSAGES .dashboard-item-content {
     flex: 1;