@fibery/ui-kit 1.38.0 → 1.38.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @fibery/ui-kit
 
+## 1.38.1
+
+### Patch Changes
+
+- db89c7a: Add Gallery View
+- 00766c6: switch to pnpm catalogs. Update to latest
+- Updated dependencies [00766c6]
+  - @fibery/emoji-data@2.7.1
+  - @fibery/helpers@1.3.4
+  - @fibery/react@1.4.5
+
 ## 1.38.0
 
 ### Minor Changes

package/config/jest/testFrameworkSetup.js

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.38.0",
+  "version": "1.38.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -31,6 +31,7 @@
     "lodash": "4.17.21",
     "md5": "2.2.1",
     "moment": "2.29.4",
+    "photoswipe": "5.4.4",
     "popper-max-size-modifier": "0.2.0",
     "prop-types": "15.7.2",
     "rc-input-number": "8.5.0",
@@ -46,26 +47,26 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.7.0",
-    "@fibery/helpers": "1.3.3",
-    "@fibery/react": "1.4.4"
+    "@fibery/emoji-data": "2.7.1",
+    "@fibery/helpers": "1.3.4",
+    "@fibery/react": "1.4.5"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
-    "@babel/runtime": "7.23.9",
+    "@babel/core": "7.28.5",
+    "@babel/runtime": "7.28.4",
     "@testing-library/dom": "8.19.1",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
-    "@types/jest": "27.0.1",
+    "@types/jest": "30.0.0",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.0.26",
@@ -74,16 +75,16 @@
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
-    "jest": "27.5.1",
-    "jest-junit": "13.0.0",
+    "jest": "30.2.0",
+    "jest-junit": "16.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.1",
-    "@fibery/babel-preset": "7.4.0"
+    "@fibery/babel-preset": "7.4.1",
+    "@fibery/eslint-config": "8.6.2"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/abbreviate-name.ts

@@ -0,0 +1,42 @@
+const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
+
+export const abbreviateName = (name?: string | null) => {
+  if (name === undefined) {
+    return "…";
+  }
+  if (name && preservedNameEmojis.includes(name)) {
+    return name;
+  }
+
+  // Check if name looks like "Surname, Name"
+  const hasComma = (name || "").includes(",");
+
+  const cleaned = (name || "")
+    .replace(/\p{Emoji_Presentation}|\p{Emoji}\uFE0F?/gu, "") // remove emojis
+    .replace(/[^\p{L}\p{M}'\-\s,]+/gu, " ") // keep comma to detect order before removing
+    .trim();
+
+  // Split on whitespace and commas
+  let parts = cleaned.split(/[,\s]+/).filter(Boolean);
+
+  // If there was a comma, assume it's "Surname, Name" and reverse
+  if (hasComma && parts.length > 1) {
+    parts = parts.reverse();
+  }
+  let result: string;
+  if (parts.length === 1) {
+    // Take the first two codepoints (safer for emoji / astral / surrogate pairs)
+    result = [...parts[0]].slice(0, 2).join("");
+  } else {
+    // Take the first codepoint of the first two parts and upper-case
+    result = parts
+      .slice(0, 2)
+      .map((p) => {
+        const first = [...p][0] || "";
+        return first.toUpperCase();
+      })
+      .join("");
+  }
+
+  return result || "?";
+};

package/src/actions-menu/actions-menu-item.tsx

@@ -7,11 +7,12 @@ import CheckedIcon from "../icons/react/Checked";
 import {IconBaseProps} from "../icons/types";
 import {Spinner} from "../loaders";
 import {mobileRootSelector} from "../mobile-styles";
-import {ShortcutBadge} from "../shortcut-badge";
+import {Kbd, KbdGroup} from "../kbd";
 import {useTheme} from "../theme-provider";
 import {useIsPhone} from "../use-is-phone";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
+import _ from "lodash";
 
 const hiddenTextCss = css`
   visibility: hidden;
@@ -90,14 +91,22 @@ const firstLetterToLowerCase = (str: string) => {
   return str.charAt(0).toLowerCase() + str.slice(1);
 };
 
-const RightCorner = ({shortcut, loading, checked}: {shortcut?: string; loading?: boolean; checked?: boolean}) => {
+const RightCorner = ({shortcut, loading, checked}: {shortcut?: string[]; loading?: boolean; checked?: boolean}) => {
   const theme = useTheme();
   const isPhone = useIsPhone();
 
-  return loading || shortcut || checked ? (
+  const shortcuts = _.isArray(shortcut) ? shortcut : shortcut ? [shortcut] : null;
+
+  return loading || shortcuts || checked ? (
     <div className={cornerCss}>
       {loading ? <Spinner color={theme.primary} iconSize={16} containerSize={16} /> : null}
-      {shortcut ? <ShortcutBadge shortcut={shortcut} /> : null}
+      {shortcuts ? (
+        <KbdGroup>
+          {shortcuts.map((item) => (
+            <Kbd key={item}>{item}</Kbd>
+          ))}
+        </KbdGroup>
+      ) : null}
       {checked ? <CheckedIcon iconSize={isPhone ? 20 : 18} color={themeVars.textColor} /> : null}
     </div>
   ) : null;
@@ -127,7 +136,7 @@ export type ActionsMenuItemProps = {
   Icon?: FunctionComponent<IconBaseProps>;
   iconColor?: string;
   /** Hint for keyboard shortcut for this action */
-  shortcut?: string;
+  shortcut?: string[];
   disabled?: boolean;
   /** Whether the action requires confirmation */
   dangerous?: boolean;

package/src/actions-menu/actions-menu-props.tsx

@@ -5,6 +5,7 @@ import {ContentProps} from "../dropdown-menu";
 export type ActionsMenuProps = {
   /** Clicking on this node will open actions menu. Make sure that trigger forwards ref AND props to html element */
   trigger: ReactNode;
+  triggerEvent?: "click" | "context-menu";
   children: ReactNode;
   align?: ContentProps["align"];
   disabled?: boolean;

package/src/actions-menu/actions-menu.tsx

@@ -23,6 +23,7 @@ const wideCss = css`
 
 export const ActionsMenu = ({
   trigger,
+  triggerEvent = "click",
   wide,
   align = "start",
   alignOffset,
@@ -77,7 +78,9 @@ export const ActionsMenu = ({
         <MenuPrimitive.Trigger
           // backward compatibility for dropdown styles
           className={isOpen ? "actions-visible" : "actions-hidden actions-visible-on-mobile"}
-          onClick={preventDefaultAndStopPropagation}
+          onClick={triggerEvent === "click" ? preventDefaultAndStopPropagation : undefined}
+          onContextMenu={triggerEvent === "context-menu" ? preventDefaultAndStopPropagation : undefined}
+          triggerEvent={triggerEvent}
           disabled={disabled}
           asChild
         >

package/src/actions-menu/context-actions-menu.tsx

@@ -2,6 +2,8 @@ import _ from "lodash";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
 import * as ContextMenu from "../context-menu";
+import {ActionsMenu} from "./actions-menu";
+import {useIsPhone} from "../use-is-phone";
 import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
 import {ActionsMenuProps} from "./actions-menu-props";
 import {preventDefault} from "@fibery/react/src/prevent-default";
@@ -14,11 +16,31 @@ export const ContextActionsMenu = ({
   trigger,
   children,
   disabled,
+  mobileTitle,
+  supportsMobile,
   autoFocusOnClose = true,
 }: ActionsMenuProps): JSX.Element => {
+  const isPhone = useIsPhone();
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
   const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
+  // Special mode - on mobile, open context menu in modal
+  if (isPhone && supportsMobile) {
+    return (
+      <ActionsMenu
+        open={open}
+        onOpenChange={onOpenChange}
+        mobileTitle={mobileTitle}
+        supportsMobile
+        // Extra div is important here to not loose the original onClick handler
+        trigger={<div>{trigger}</div>}
+        triggerEvent="context-menu"
+      >
+        {children}
+      </ActionsMenu>
+    );
+  }
+
   return (
     <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={ContextMenu}>
       <ContextMenu.Root onOpenChange={onOpenChange}>

package/src/animated-height-container.tsx

@@ -1,16 +1,20 @@
 import {useSize} from "@fibery/react/src/use-size";
 import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
 import {duration, transition} from "./design-system";
-import cx from "classnames";
 import _ from "lodash";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
-interface AnimatedHeightContainerProps extends ComponentProps<"div"> {
+type AnimatedHeightContainerProps = ComponentProps<"div"> & {
   noAnimation?: boolean;
-}
+  onTransitionStart?: (event: TransitionEvent) => void;
+  onTransitionEnd?: (event: TransitionEvent) => void;
+};
 
 export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeightContainerProps>(
-  function AnimatedHeightContainerComponent({className, noAnimation = false, children, ...otherProps}, ref) {
+  function AnimatedHeightContainerComponent(
+    {className, noAnimation = false, onTransitionStart = _.noop, onTransitionEnd = _.noop, children, ...otherProps},
+    ref
+  ) {
     const measuredContainer = useRef<HTMLDivElement | null>(null);
     const size = useSize(measuredContainer);
 
@@ -60,6 +64,21 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
       return cleanup;
     }, [animating]);
 
+    useEffect(() => {
+      const element = containerRef.current;
+      if (!element) {
+        return () => {};
+      }
+
+      element.addEventListener("transitionstart", onTransitionStart);
+      element.addEventListener("transitionend", onTransitionEnd);
+
+      return () => {
+        element.removeEventListener("transitionstart", onTransitionStart);
+        element.removeEventListener("transitionend", onTransitionEnd);
+      };
+    }, [onTransitionStart, onTransitionEnd]);
+
     const style = animating
       ? {
           ...otherProps.style,
@@ -74,7 +93,7 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
         };
 
     return (
-      <div ref={composedRef} className={cx(className)} {...otherProps} style={style}>
+      <div ref={composedRef} className={className} {...otherProps} style={style}>
         <div ref={measuredContainer}>{children}</div>
       </div>
     );

package/src/antd/ant-upload.tsx

@@ -27,7 +27,7 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload.ant-upload-drag, .ant-upload.ant-upload-select-picture-card": {
+    "& .ant-upload:where(.ant-upload-drag), .ant-upload:where(.ant-upload-select-picture-card)": {
       border: `1px dashed ${themeVars.separator}`,
       position: "relative",
       backgroundColor: themeVars.transparent,

package/src/antd/input.tsx

@@ -2,6 +2,7 @@ import {getWrapper} from "./get-wrapper";
 import Input from "antd/lib/input";
 import "antd/lib/input/style/css";
 import {css} from "@linaria/core";
+import {mobileRootSelector} from "../mobile-styles";
 import {opacity, textStyles, themeVars} from "../design-system";
 
 import {inputStyles} from "./styles";
@@ -24,6 +25,9 @@ export const transparentInputStyle = css`
       transition: "none",
       ...textStyles.regular,
       ...textStyles.numeric.tabularOff,
+      [`${mobileRootSelector} &`]: {
+        ...textStyles.big,
+      },
     },
     "& textarea.ant-input": {
       fontVariant: "inherit",

package/src/avatar.tsx

@@ -5,33 +5,7 @@ import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./d
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
 import {useFeatures} from "./features";
-
-const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
-
-export const abbreviateName = (name?: string) => {
-  if (name === undefined) {
-    return "…";
-  }
-  if (preservedNameEmojis.includes(name)) {
-    return name;
-  }
-  const filteredName = (name || "").replace(/[!~.\-@[\]]/g, "").trim();
-  const match = filteredName.match(/\p{Letter}[\p{Letter} ]+/gu);
-  const processedName = match ? match[0] : "";
-  const parts = processedName.split(" ").filter((part) => part !== "");
-  let result;
-  if (parts.length === 1) {
-    result = processedName.slice(0, 2);
-  } else {
-    result = parts
-      .filter((part, index) => index < 2)
-      .map((part) => {
-        return part[0].toUpperCase();
-      })
-      .join("");
-  }
-  return result || "?";
-};
+import {abbreviateName} from "./abbreviate-name";
 
 export const getContainerStyle = _.memoize((containerSize) => {
   return {

package/src/button/base-button.tsx

@@ -14,6 +14,8 @@ export type BaseButtonProps = {
   supportMobile?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
+export const xLargeButtonHeight = 40;
+
 export const baseButton = css`
   position: relative;
   box-sizing: border-box;

package/src/button/button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 import {useIsPhone} from "../use-is-phone";
 
@@ -150,7 +150,7 @@ const buttonSize = {
     letter-spacing: ${textStyles.heading3.letterSpacing};
 
     border-radius: ${border.radius6}px;
-    min-height: 44px;
+    min-height: ${xLargeButtonHeight}px;
     padding: ${space.s6}px ${space.s12}px;
     gap: ${space.s6}px;
 
@@ -205,6 +205,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled || pending}
         className={cx(
+          "notranslate",
           className,
           button,
           buttonSize[supportMobile && isPhone ? "large" : size],

package/src/button/icon-button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, space} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import Spinner from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 import {useIsPhone} from "../use-is-phone";
 
 export type IconButtonProps = {
@@ -55,8 +55,8 @@ export const iconButtonSizes = {
   xLarge: css`
     padding: ${space.s6}px;
 
-    min-width: 44px;
-    min-height: 44px;
+    min-width: ${xLargeButtonHeight}px;
+    min-height: ${xLargeButtonHeight}px;
     border-radius: ${border.radius6}px;
 
     ${iconSizeVar}: 24px;

package/src/card-container.tsx

@@ -247,7 +247,8 @@ const floatingStyles = {
 };
 
 const coverClassName = css`
-  margin: ${-space.s4}px;
+  // box padding -1px to go below the outline
+  margin: ${-space.s5}px;
 
   &:empty {
     display: none;
@@ -255,7 +256,7 @@ const coverClassName = css`
 `;
 
 const coverWithContentClassName = css`
-  border-bottom: ${themeVars.separators.opacity5};
+  border-bottom: ${themeVars.shortcutBorderColor};
   margin-bottom: 0;
 `;
 

package/src/checkbox.tsx

@@ -14,6 +14,7 @@ import {
 } from "react";
 import {colors, getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
+import {mobileRootSelector} from "./mobile-styles";
 
 const checkboxColor = `--fibery-checkbox-color`;
 const checkboxColorVar = `var(${checkboxColor})`;
@@ -36,6 +37,10 @@ const backgroundStyle = css`
   box-shadow: 0 0 0 1.5px ${borderColorVar};
   background-color: ${themeVars.panelBg};
 
+  ${mobileRootSelector} & {
+    box-shadow: 0 0 0 1.6px ${borderColorVar};
+  }
+
   .${smallHtmlStylesClass} & {
     width: ${layout.checkboxSize - 2}px;
     height: ${layout.checkboxSize - 2}px;
@@ -53,6 +58,9 @@ const checkboxRootStyle = css`
   & input[type="checkbox"]:checked + .${backgroundStyle} {
     background-color: ${checkboxColorVar};
     box-shadow: 0 0 0 1.5px ${checkboxColorVar} !important;
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${checkboxColorVar} !important;
+    }
   }
 
   & input[type="checkbox"]:indeterminate + .${backgroundStyle} {
@@ -66,15 +74,24 @@ const checkboxRootStyle = css`
   &:hover input[type="checkbox"]:checked:not(:disabled) + .${backgroundStyle} {
     background-color: ${darkenColorVar};
     box-shadow: 0 0 0 1.5px ${darkenColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${darkenColorVar};
+    }
   }
 
   &:hover input[type="checkbox"]:checked:focus:not(:disabled) + .${backgroundStyle} {
     background-color: ${darkenColorVar};
     box-shadow: 0 0 0 1.5px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+    }
   }
 
   & input[type="checkbox"]:focus + .${backgroundStyle} {
     box-shadow: 0 0 0 1.5px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+    }
   }
 
   .${smallHtmlStylesClass} & {

package/src/collapsible-section.tsx

@@ -25,6 +25,7 @@ type Props = {
   children: ReactNode;
   badge?: ReactNode;
   keepChildren?: boolean;
+  className?: string;
 };
 
 export const CollapsibleSection = ({
@@ -35,6 +36,7 @@ export const CollapsibleSection = ({
   onCollapsedChange,
   children,
   badge,
+  className,
 }: Props) => {
   const [isCollapsed, setIsCollapsed] = useControllableState({
     value: collapsed,
@@ -71,7 +73,7 @@ export const CollapsibleSection = ({
   const regularHeader = label && <div className={headerCss}>{label}</div>;
 
   return (
-    <div>
+    <div className={className}>
       {collapsible ? collapsibleHeader : regularHeader}
       <div style={{display: collapsible && isCollapsed ? "none" : "block"}}>{children}</div>
     </div>

package/src/date-picker/autocomplete.tsx

@@ -2,7 +2,8 @@ import moment from "moment";
 import {useMemo} from "react";
 import {Select} from "../select";
 import {SelectControlSettingsProvider} from "../select/select-control-settings-context";
-import {timeFormat as defaultTimeFormat} from "../design-system";
+import {timeFormat as defaultTimeFormat, space} from "../design-system";
+import {useIsPhone} from "../use-is-phone";
 
 const step = 30;
 
@@ -26,6 +27,8 @@ export const AutoComplete = ({
   menuIsOpen: boolean;
   position: number;
 }) => {
+  const isPhone = useIsPhone();
+
   const options = useMemo(
     () =>
       Array.from({length: (24 * 60) / step}, (value, index) => {
@@ -61,12 +64,15 @@ export const AutoComplete = ({
             ...props,
             zIndex: 1000000,
             position: "absolute",
-            width: "auto",
-            top: position,
+            width: isPhone ? `calc(100vw - ${2 * space.s12}px)` : "auto",
+            top: isPhone ? space.s18 : position,
             margin: 0,
-            left: 100,
+            left: isPhone ? -space.s12 : 100,
+          }),
+          menuList: (props) => ({
+            ...props,
+            width: isPhone ? "auto" : 100,
           }),
-          menuList: (props) => ({...props, width: 100}),
         }}
       />
     </SelectControlSettingsProvider>

package/src/date-picker/date-range-input.tsx

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import cx from "classnames";
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from "react";
 import {MonthChangeEventHandler} from "react-day-picker";
+import {mobileRootSelector} from "../mobile-styles";
 import {AntTransparentInput} from "../antd/input";
 import {AntTransparentTextArea} from "../antd/input";
 import {inputOverrides} from "../antd/styles";
@@ -292,6 +293,9 @@ export const DateRangeInput = forwardRef<
             display: flex;
             margin-bottom: ${space.s12 + space.s6}px;
             padding-right: ${space.s12 - 2}px;
+            ${mobileRootSelector} & {
+              min-height: ${space.s44}px;
+            }
           `,
           {[selectedStyle]: selected, [disabledStyle]: disabled}
         )}
@@ -335,7 +339,7 @@ export const DateRangeInput = forwardRef<
             />
           </div>
           {allowClear && inputValue !== "" && (
-            <IconButton onClick={onClear} size={"tiny"}>
+            <IconButton onClick={onClear} size={"tiny"} supportMobile>
               <RemoveIcon />
             </IconButton>
           )}

package/src/date-picker/date-range-picker-popup-content.tsx

@@ -19,6 +19,7 @@ import {
   weekendClassName,
 } from "./styles";
 import {getWeekendsForMonth} from "./get-weekends-for-month";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const sortDates = ({from, to}: {from: Date; to: Date}) => {
   const [sortedFrom, sortedTo] = [from, to].sort((a, b) => a.getTime() - b.getTime());
@@ -108,19 +109,36 @@ export const DateRangePickerPopupContent = forwardRef<
       : null;
 
   const footer = duration ? (
-    <div
-      className={css`
-        background-color: ${themeVars.inputDisabledBgColor};
-        border-radius: ${border.radius6}px;
-        padding: ${space.s4}px ${space.s8}px;
-        ${textStyles.small}
-        text-align: center;
-        color: ${themeVars.disabledTextColor};
-        margin-top: ${space.s12}px;
-      `}
-    >
-      {duration}
-    </div>
+    <>
+      <hr
+        className={css`
+          display: none;
+          margin: 0 ${-space.s12}px;
+          border: none;
+          border-bottom: ${themeVars.separators.opacity5};
+          ${mobileRootSelector} & {
+            display: block;
+          }
+        `}
+      />
+      <div
+        className={css`
+          background-color: ${themeVars.inputDisabledBgColor};
+          border-radius: ${border.radius6}px;
+          padding: ${space.s4}px ${space.s8}px;
+          ${textStyles.small}
+          text-align: center;
+          color: ${themeVars.disabledTextColor};
+          margin-top: ${space.s12}px;
+          ${mobileRootSelector} & {
+            ${textStyles.big}
+            color: ${themeVars.disabledTextColor};
+          }
+        `}
+      >
+        {duration}
+      </div>
+    </>
   ) : null;
 
   const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, true)}`);