✨ polishing report responsitivity (#3636)

packages/desktop-client/src/components/common/SpaceBetween.tsx

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from 'react';
+
+import { type CSSProperties } from '../../style';
+
+import { View } from './View';
+
+type SpaceBetweenProps = {
+  direction?: 'horizontal' | 'vertical';
+  gap?: number;
+  style?: CSSProperties;
+  children: ReactNode;
+};
+
+export const SpaceBetween = ({
+  direction = 'horizontal',
+  gap = 15,
+  style,
+  children,
+}: SpaceBetweenProps) => {
+  return (
+    <View
+      style={{
+        flexWrap: 'wrap',
+        flexDirection: direction === 'horizontal' ? 'row' : 'column',
+        alignItems: 'center',
+        gap,
+        ...style,
+      }}
+    >
+      {children}
+    </View>
+  );
+};

packages/desktop-client/src/components/common/Tooltip.tsx

@@ -52,7 +52,7 @@ export const Tooltip = ({
 
   return (
     <View
-      style={{ minHeight: 'auto' }}
+      style={{ minHeight: 'auto', flexShrink: 0 }}
       ref={triggerRef}
       onMouseEnter={handlePointerEnter}
       onMouseLeave={handlePointerLeave}

packages/desktop-client/src/components/filters/CompactFiltersButton.tsx

@@ -5,8 +5,12 @@ import { Button } from '../common/Button2';
 
 export function CompactFiltersButton({ onPress }: { onPress: () => void }) {
   return (
-    <Button variant="bare" onPress={onPress}>
-      <SvgFilter width={15} height={15} />
+    <Button variant="bare" onPress={onPress} style={{ minWidth: 20 }}>
+      <SvgFilter
+        width={15}
+        height={15}
+        style={{ width: 15, height: 15, flexShrink: 0 }}
+      />
     </Button>
   );
 }

packages/desktop-client/src/components/filters/FilterExpression.tsx

@@ -62,8 +62,21 @@ export function FilterExpression<T extends RuleConditionEntity>({
         variant="bare"
         isDisabled={customName != null}
         onPress={() => setEditing(true)}
+        style={{
+          maxWidth: 'calc(100% - 26px)',
+          whiteSpace: 'nowrap',
+          display: 'block',
+        }}
       >
-        <div style={{ paddingBlock: 1, paddingLeft: 5, paddingRight: 2 }}>
+        <div
+          style={{
+            paddingBlock: 1,
+            paddingLeft: 5,
+            paddingRight: 2,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
           {customName ? (
             <Text style={{ color: theme.pageTextPositive }}>{customName}</Text>
           ) : (

packages/desktop-client/src/components/filters/FiltersButton.tsx

@@ -6,7 +6,10 @@ import { Button } from '../common/Button2';
 export function FiltersButton({ onPress }: { onPress: () => void }) {
   return (
     <Button variant="bare" onPress={onPress}>
-      <SvgFilter style={{ width: 12, height: 12, marginRight: 5 }} /> Filter
+      <SvgFilter
+        style={{ width: 12, height: 12, marginRight: 5, flexShrink: 0 }}
+      />{' '}
+      Filter
     </Button>
   );
 }

packages/desktop-client/src/components/reports/Header.tsx

@@ -10,6 +10,7 @@ import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useResponsive } from '../../ResponsiveProvider';
 import { Button } from '../common/Button2';
 import { Select } from '../common/Select';
+import { SpaceBetween } from '../common/SpaceBetween';
 import { View } from '../common/View';
 import { AppliedFilters } from '../filters/AppliedFilters';
 import { FilterButton } from '../filters/FiltersMenu';
@@ -66,82 +67,69 @@ export function Header({
     <View
       style={{
         padding: 20,
-        paddingTop: 0,
+        paddingTop: 15,
         flexShrink: 0,
       }}
     >
-      <View
+      <SpaceBetween
+        direction={isNarrowWidth ? 'vertical' : 'horizontal'}
         style={{
-          flexDirection: isNarrowWidth ? 'column' : 'row',
           alignItems: isNarrowWidth ? 'flex-start' : 'center',
-          marginTop: 15,
-          gap: 15,
         }}
       >
-        {isDashboardsFeatureEnabled && mode && (
-          <Button
-            variant={mode === 'static' ? 'normal' : 'primary'}
-            onPress={() => {
-              const newMode = mode === 'static' ? 'sliding-window' : 'static';
-              const [newStart, newEnd] = calculateTimeRange({
-                start,
-                end,
-                mode: newMode,
-              });
+        <SpaceBetween gap={isNarrowWidth ? 5 : undefined}>
+          {isDashboardsFeatureEnabled && mode && (
+            <Button
+              variant={mode === 'static' ? 'normal' : 'primary'}
+              onPress={() => {
+                const newMode = mode === 'static' ? 'sliding-window' : 'static';
+                const [newStart, newEnd] = calculateTimeRange({
+                  start,
+                  end,
+                  mode: newMode,
+                });
 
-              onChangeDates(newStart, newEnd, newMode);
-            }}
-          >
-            {mode === 'static' ? 'Static' : 'Live'}
-          </Button>
-        )}
+                onChangeDates(newStart, newEnd, newMode);
+              }}
+            >
+              {mode === 'static' ? 'Static' : 'Live'}
+            </Button>
+          )}
 
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 5,
-          }}
-        >
-          <Select
-            onChange={newValue =>
-              onChangeDates(
-                ...validateStart(
-                  allMonths[allMonths.length - 1].name,
-                  newValue,
-                  end,
-                ),
-              )
-            }
-            value={start}
-            defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
-          <View>to</View>
-          <Select
-            onChange={newValue =>
-              onChangeDates(
-                ...validateEnd(
-                  allMonths[allMonths.length - 1].name,
-                  start,
-                  newValue,
-                ),
-              )
-            }
-            value={end}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-            style={{ marginRight: 10 }}
-          />
-        </View>
+          <SpaceBetween gap={5}>
+            <Select
+              onChange={newValue =>
+                onChangeDates(
+                  ...validateStart(
+                    allMonths[allMonths.length - 1].name,
+                    newValue,
+                    end,
+                  ),
+                )
+              }
+              value={start}
+              defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
+              options={allMonths.map(({ name, pretty }) => [name, pretty])}
+            />
+            <View>to</View>
+            <Select
+              onChange={newValue =>
+                onChangeDates(
+                  ...validateEnd(
+                    allMonths[allMonths.length - 1].name,
+                    start,
+                    newValue,
+                  ),
+                )
+              }
+              value={end}
+              options={allMonths.map(({ name, pretty }) => [name, pretty])}
+              style={{ marginRight: 10 }}
+            />
+          </SpaceBetween>
+        </SpaceBetween>
 
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 15,
-            flexWrap: 'wrap',
-          }}
-        >
+        <SpaceBetween>
           {show1Month && (
             <Button
               variant="bare"
@@ -187,7 +175,7 @@ export function Header({
               exclude={undefined}
             />
           )}
-        </View>
+        </SpaceBetween>
 
         {children ? (
           <View
@@ -202,7 +190,7 @@ export function Header({
         ) : (
           <View style={{ flex: 1 }} />
         )}
-      </View>
+      </SpaceBetween>
 
       {filters && filters.length > 0 && (
         <View style={{ marginTop: 5 }}>

packages/desktop-client/src/components/reports/ModeButton.tsx

@@ -25,7 +25,6 @@ export function ModeButton({
         css({
           padding: '5px 10px',
           backgroundColor: theme.menuBackground,
-          marginRight: 5,
           fontSize: 'inherit',
           ...style,
           ...(selected && {

packages/desktop-client/src/components/reports/ReportSidebar.tsx

@@ -14,6 +14,7 @@ import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
 import { Select, type SelectOption } from '../common/Select';
+import { SpaceBetween } from '../common/SpaceBetween';
 import { Text } from '../common/Text';
 import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
@@ -177,16 +178,13 @@ export function ReportSidebar({
             <strong>Display</strong>
           </Text>
         </View>
-        <View
+        <SpaceBetween
+          gap={5}
           style={{
-            flexDirection: 'row',
             padding: 5,
-            alignItems: 'center',
           }}
         >
-          <Text style={{ width: 50, textAlign: 'right', marginRight: 5 }}>
-            Mode:
-          </Text>
+          <Text style={{ width: 50, textAlign: 'right' }}>Mode:</Text>
           <ModeButton
             selected={customReportItems.mode === 'total'}
             onSelect={() => onChangeMode('total')}
@@ -199,7 +197,7 @@ export function ReportSidebar({
           >
             Time
           </ModeButton>
-        </View>
+        </SpaceBetween>
         <View
           style={{
             flexDirection: 'row',
@@ -394,12 +392,11 @@ export function ReportSidebar({
             flexShrink: 0,
           }}
         />
-        <View
+        <SpaceBetween
+          gap={5}
           style={{
-            flexDirection: 'row',
             marginTop: 10,
             marginBottom: 5,
-            alignItems: 'center',
           }}
         >
           <Text>
@@ -430,7 +427,7 @@ export function ReportSidebar({
           >
             Static
           </ModeButton>
-        </View>
+        </SpaceBetween>
         {!customReportItems.isDateStatic ? (
           <View
             style={{