[DEV-9859] Improve mobile data table fonts (#1713)

CDCgov · Nov 22, 2024 · 12a6412 · 12a6412
1 parent 555f5ad
commit 12a6412
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/packages/core/components/DataTable/components/ExpandCollapse.tsx b/packages/core/components/DataTable/components/ExpandCollapse.tsx
@@ -2,7 +2,7 @@ import Icon from '../../ui/Icon'
 import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
       style={{ fontSize: titleFontSize }}

diff --git a/packages/core/components/DataTable/components/SortIcon/sort-icon.css b/packages/core/components/DataTable/components/SortIcon/sort-icon.css
@@ -19,3 +19,18 @@
     top: 0.5rem;
   }
 }
+
+@media (max-width: 576px) {
+  .sort-icon {
+    :is(svg) {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+    .up {
+      bottom: 0.3rem;
+    }
+    .down {
+      top: 0.3rem;
+    }
+  }
+}
diff --git a/packages/core/components/Table/components/Row.tsx b/packages/core/components/Table/components/Row.tsx
@@ -19,7 +19,7 @@ const Row: FC<RowProps> = props => {
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
   const fontSizes = { small: 16, medium: 18, large: 20 }
-  const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
+  const cellFontSize = ['xs', 'xxs'].includes(viewport) ? '12px' : `${fontSizes[fontSize]}px`
 
   return (
     <tr>

diff --git a/packages/core/styles/_global-variables.scss b/packages/core/styles/_global-variables.scss
@@ -91,8 +91,8 @@ $colors: (
   --font-size: 17px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 576px) {
   :root {
-    --font-size: 0.9em;
+    --font-size: 13px;
   }
 }
diff --git a/packages/dashboard/src/components/CollapsibleVisualizationRow.tsx b/packages/dashboard/src/components/CollapsibleVisualizationRow.tsx
@@ -8,10 +8,16 @@ type CollapsableVizRow = {
   groupName: string
   currentViewport: string
 }
-const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({ allExpanded, fontSize, groupName, currentViewport, children }) => {
+const CollapsibleVisualizationRow: React.FC<CollapsableVizRow> = ({
+  allExpanded,
+  fontSize,
+  groupName,
+  currentViewport,
+  children
+}) => {
   const [isExpanded, setIsExpanded] = useState(allExpanded)
   const fontSizes = { small: 16, medium: 18, large: 20 }
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(currentViewport) ? '13px' : `${fontSizes[fontSize]}px`
 
   useEffect(() => {
     setIsExpanded(allExpanded)