diff --git a/lib/experimental/Information/Headers/BaseHeader/index.tsx b/lib/experimental/Information/Headers/BaseHeader/index.tsx
index 0131d7094..4a7e50b58 100644
--- a/lib/experimental/Information/Headers/BaseHeader/index.tsx
+++ b/lib/experimental/Information/Headers/BaseHeader/index.tsx
@@ -84,7 +84,7 @@ export function BaseHeader({
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:hidden">
{metadata && <Metadata items={allMetadata} />}
</div>
- <div className="flex w-full shrink-0 flex-wrap items-center gap-x-3 gap-y-4 md:w-fit md:flex-row-reverse md:gap-y-2 md:overflow-x-auto">
+ <div className="flex w-full shrink-0 flex-wrap items-center gap-x-2 gap-y-3 md:w-fit md:flex-row-reverse md:gap-y-2 md:overflow-x-auto">
{primaryAction && (
<>
<div className="hidden md:block">
@@ -107,7 +107,7 @@ export function BaseHeader({
</>
)}
{primaryAction && (secondaryActions || otherActions) && (
- <div className="hidden h-4 w-px bg-f1-background-secondary md:block" />
+ <div className="mx-1 hidden h-4 w-px bg-f1-background-secondary md:block" />
)}
{secondaryActions &&
secondaryActions.map((action) => (
diff --git a/lib/experimental/Information/Headers/Metadata/index.tsx b/lib/experimental/Information/Headers/Metadata/index.tsx
index 49292bac8..425ef1ecd 100644
--- a/lib/experimental/Information/Headers/Metadata/index.tsx
+++ b/lib/experimental/Information/Headers/Metadata/index.tsx
@@ -8,6 +8,7 @@ import {
StatusTag,
StatusVariant,
} from "@/experimental/Information/Tags/StatusTag"
+import { MobileDropdown } from "@/experimental/Navigation/Dropdown"
import { Tooltip } from "@/experimental/Overlays/Tooltip"
import { cn } from "@/lib/utils"
import { AnimatePresence, motion } from "framer-motion"
@@ -53,6 +54,7 @@ function renderMetadataValue(item: MetadataItem) {
function MetadataItem({ item }: { item: MetadataItem }) {
const [isActive, setIsActive] = useState(false)
const isAction = item.actions?.length
+ const metadataValue = renderMetadataValue(item)
return (
<div className="flex h-8 items-center gap-2">
@@ -68,9 +70,29 @@ function MetadataItem({ item }: { item: MetadataItem }) {
onBlur={() => isAction && setIsActive(false)}
className="relative flex h-5 w-fit items-center hover:cursor-default"
>
- <div className="font-medium text-f1-foreground">
- {renderMetadataValue(item)}
+ <div
+ className={cn(
+ "hidden font-medium text-f1-foreground md:block",
+ !isAction && "block"
+ )}
+ >
+ {metadataValue}
</div>
+ {isAction && (
+ <div className="w-full md:hidden">
+ <MobileDropdown
+ items={
+ item.actions?.map((action) => ({
+ label: action.label,
+ icon: action.icon,
+ onClick: action.onClick,
+ })) ?? []
+ }
+ >
+ {metadataValue}
+ </MobileDropdown>
+ </div>
+ )}
<AnimatePresence>
{isActive && isAction && (
<motion.div
@@ -84,7 +106,7 @@ function MetadataItem({ item }: { item: MetadataItem }) {
transition={{ duration: 0.1 }}
>
<div className="flex h-5 items-center font-medium text-f1-foreground">
- {renderMetadataValue(item)}
+ {metadataValue}
</div>
{isAction && (
<motion.div
diff --git a/lib/experimental/Navigation/Dropdown/index.tsx b/lib/experimental/Navigation/Dropdown/index.tsx
index e7446d97b..0e01e93f4 100644
--- a/lib/experimental/Navigation/Dropdown/index.tsx
+++ b/lib/experimental/Navigation/Dropdown/index.tsx
@@ -1,7 +1,7 @@
import { Button, ButtonProps } from "@/components/Actions/Button"
-import { IconType } from "@/components/Utilities/Icon"
+import { Icon, IconType } from "@/components/Utilities/Icon"
import { AvatarVariant } from "@/experimental/Information/Avatars/utils"
-import { Ellipsis, EllipsisHorizontal } from "@/icons/app"
+import { EllipsisHorizontal } from "@/icons/app"
import { Link } from "@/lib/linkHandler"
import { cn } from "@/lib/utils"
import {
@@ -17,7 +17,6 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/ui/dropdown-menu"
-import { Separator } from "@/ui/separator"
import { useState } from "react"
import { NavigationItem } from "../utils"
import { DropdownItemContent } from "./DropdownItem"
@@ -71,7 +70,7 @@ const DropdownItem = ({ item }: { item: DropdownItemObject }) => {
export function Dropdown({
items,
- icon = Ellipsis,
+ icon = EllipsisHorizontal,
size,
children,
}: DropdownProps) {
@@ -89,7 +88,7 @@ export function Dropdown({
/>
)}
</DropdownMenuTrigger>
- <DropdownMenuContent align="end">
+ <DropdownMenuContent align="start">
{items.map((item, index) =>
item === "separator" ? (
<DropdownMenuSeparator key={index} />
@@ -121,10 +120,13 @@ export const MobileDropdown = ({ items, children }: DropdownProps) => {
</DrawerTrigger>
<DrawerOverlay className="bg-f1-background-overlay" />
<DrawerContent className="bg-f1-background">
- <div className="flex flex-col gap-2 p-4">
+ <div className="flex flex-col px-2 pb-3 pt-2">
{items.map((item, index) =>
item === "separator" ? (
- <Separator key={`separator-${index}`} />
+ <div
+ key={`separator-${index}`}
+ className="mx-[-8px] my-2 h-px w-[calc(100%+16px)] bg-f1-border-secondary"
+ />
) : item.href ? (
<Link
{...item}
@@ -138,17 +140,33 @@ export const MobileDropdown = ({ items, children }: DropdownProps) => {
<DropdownItemContent item={item} />
</Link>
) : (
- <Button
+ <button
key={item.label}
- label={item.label}
onClick={() => {
item.onClick?.()
setOpen(false)
}}
- variant={item.critical ? "critical" : "outline"}
- icon={item.icon}
- size="lg"
- />
+ className="flex w-full items-center gap-2 p-3"
+ >
+ {item.icon && (
+ <span
+ className={cn(
+ "h-5 w-5 text-f1-icon",
+ item.critical && "text-f1-icon-critical"
+ )}
+ >
+ <Icon icon={item.icon} size="md" />
+ </span>
+ )}
+ <span
+ className={cn(
+ "font-medium",
+ item.critical && "text-f1-foreground-critical"
+ )}
+ >
+ {item.label}
+ </span>
+ </button>
)
)}
</div>
diff --git a/lib/ui/drawer.tsx b/lib/ui/drawer.tsx
index 81af574e8..d496195c9 100644
--- a/lib/ui/drawer.tsx
+++ b/lib/ui/drawer.tsx
@@ -41,12 +41,12 @@ const DrawerContent = React.forwardRef<
<DrawerPrimitive.Content
ref={ref}
className={cn(
- "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+ "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl",
className
)}
{...props}
>
- <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+ <div className="mx-auto mt-2 h-1 w-8 rounded-full bg-f1-border" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
diff --git a/lib/ui/dropdown-menu.tsx b/lib/ui/dropdown-menu.tsx
index d07aaa89f..b9b7685ca 100644
--- a/lib/ui/dropdown-menu.tsx
+++ b/lib/ui/dropdown-menu.tsx
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
- "relative flex cursor-default select-none items-center rounded px-3 py-2 text-base font-medium outline-none transition-colors after:absolute after:inset-x-1 after:inset-y-0 after:h-full after:rounded after:bg-f1-background-hover after:opacity-0 after:transition-opacity after:duration-75 after:content-[''] first:pt-3 first:after:top-1 first:after:h-[calc(100%-0.25rem)] last:pb-3 last:after:bottom-1 last:after:h-[calc(100%-0.25rem)] hover:after:opacity-100 focus:after:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "relative flex cursor-default select-none items-center rounded py-2 pl-3 pr-5 text-base font-medium outline-none transition-colors after:absolute after:inset-x-1 after:inset-y-0 after:h-full after:rounded after:bg-f1-background-hover after:opacity-0 after:transition-opacity after:duration-75 after:content-[''] first:pt-3 first:after:top-1 first:after:h-[calc(100%-0.25rem)] last:pb-3 last:after:bottom-1 last:after:h-[calc(100%-0.25rem)] hover:after:opacity-100 focus:after:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:outline-none focus:ring-0 focus:ring-transparent", // Temporal fix for Gamma issue
inset && "pl-8",
className