fixes

Author: flipvh

frontend/package.json

@@ -23,7 +23,6 @@
     "@blocknote/shadcn": "^0.21.0",
     "@electric-sql/client": "1.0.0-beta.1",
     "@emotion/react": "^11.14.0",
-    "@floating-ui/react": "^0.27.0",
     "@github/mini-throttle": "^2.1.1",
     "@hookform/resolvers": "^3.9.1",
     "@oslojs/encoding": "^1.1.0",
@@ -151,11 +150,7 @@
     "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-static-copy": "^2.2.0"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
+  "browserslist": [">0.2%", "not dead", "not op_mini all"],
   "postcss": {
     "plugins": {
       "postcss-import": {},

frontend/src/modules/attachments/attachment-dialog.tsx

@@ -13,7 +13,7 @@ export const attachmentDialog = (attachment: number, attachments: Attachments[],
       id: 'file-preview',
       drawerOnMobile: false,
       className: 'min-w-full h-screen border-0 p-0 rounded-none flex flex-col mt-0',
-      headerClassName: 'absolute p-3 w-full backdrop-blur-sm bg-background/50',
+      headerClassName: 'absolute p-4 w-full backdrop-blur-sm bg-background/50',
       title: title ?? t('common:view_item', { item: t('common:attachment').toLowerCase() }),
       autoFocus: true,
     },

frontend/src/modules/attachments/attachment-render.tsx

@@ -1,3 +1,4 @@
+import { useBreakpoints } from '~/hooks/use-breakpoints';
 import ReactPanZoom from '~/modules/attachments/image-viewer';
 import { RenderAudio } from '~/modules/attachments/render-audio';
 import RenderPDF from '~/modules/attachments/render-pdf';
@@ -24,10 +25,12 @@ export const AttachmentRender = ({
   containerClassName,
   togglePanState,
 }: AttachmentRenderProps) => {
+  const isMobile = useBreakpoints('max', 'sm');
+
   return (
     <div className={containerClassName}>
       {type.includes('image') &&
-        (imagePanZoom ? (
+        (imagePanZoom && !isMobile ? (
           <ReactPanZoom image={source} alt={altName} togglePanState={togglePanState} imageClass={itemClassName} showButtons={showButtons} />
         ) : (
           <img src={source} alt={altName} className={`${itemClassName} w-full h-full`} />

frontend/src/modules/attachments/attachments-table/columns.tsx

@@ -49,7 +49,7 @@ export const useColumns = (
     {
       key: 'filename',
       name: t('common:filename'),
-      visible: true,
+      visible: !isMobile,
       sortable: false,
       renderHeaderCell: HeaderCell,
       renderCell: ({ row, tabIndex }) => (

frontend/src/modules/attachments/attachments-table/table.tsx

@@ -87,7 +87,7 @@ const BaseDataTable = memo(
       <DataTable<Attachment>
         {...{
           columns: columns.filter((column) => column.visible),
-          rowHeight: 42,
+          rowHeight: 50,
           enableVirtualization: false,
           onRowsChange,
           rows,

frontend/src/modules/common/data-table/index.tsx

@@ -81,7 +81,7 @@ export const DataTable = <TData,>({
   onSelectedRowsChange,
   sortColumns,
   onSortColumnsChange,
-  rowHeight = 40,
+  rowHeight = 50,
   enableVirtualization,
   onRowsChange,
   fetchMore,

frontend/src/modules/common/data-table/style.css

@@ -12,7 +12,7 @@
   --rdg-checkbox-focus-color: hsl(var(--ring));
   --rdg-checkbox-disabled-border-color: hsl(var(--muted-foreground));
   --rdg-checkbox-disabled-background-color: hsl(var(--muted));
-
+  --rdg-font-size: 0.888rem;
   --rdg-selection-color: hsl(var(--ring));
 
   grid-template-rows: none !important;

frontend/src/modules/common/main-nav/bar-nav/index.tsx

@@ -40,7 +40,7 @@ const BarNav = ({ items, onClick }: { items: NavItem[]; onClick: (index: number)
       data-started={hasStarted}
       className="fixed z-[100] sm:z-[110] w-full max-sm:bottom-0 transition-transform ease-out shadow-sm sm:left-0 sm:top-0 sm:h-screen sm:w-16 group-[.focus-view]/body:hidden bg-primary data-[theme=none]:bg-secondary data-[started=false]:max-sm:translate-y-full data-[started=false]:sm:-translate-x-full"
     >
-      <ul className="flex flex-row justify-between p-1 sm:flex-col sm:space-y-1">
+      <ul className="flex flex-row justify-between p-1 sm:flex-col sm:gap-1 max-sm:px-2">
         {items.map((navItem: NavItem, index: number) => {
           const isSecondItem = index === 1;
           const isActive = navSheetOpen === navItem.id;
@@ -49,7 +49,10 @@ const BarNav = ({ items, onClick }: { items: NavItem[]; onClick: (index: number)
 
           return (
             <Fragment key={navItem.id}>
-              <div data-second-item={isSecondItem} className="hidden data-[second-item=true]:xs:flex data-[second-item=true]:xs:grow" />
+              <div
+                data-second-item={isSecondItem}
+                className="hidden data-[second-item=true]:xs:flex data-[second-item=true]:sm:hidden data-[second-item=true]:xs:grow"
+              />
               <li
                 data-second-item={isSecondItem}
                 className="flex peer transform sm:grow-0

frontend/src/modules/common/multi-email/index.tsx

@@ -321,7 +321,7 @@ export function MultiEmail(props: MultiEmailProps) {
               <button
                 type="button"
                 className={cn(
-                  'py-1 m-[-.25rem] ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                  'py-1 m-[-.25rem] ml-1 rounded-full outline-none sm:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                 )}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {

frontend/src/modules/common/nav-sheet/menu-archive-toggle.tsx

@@ -17,7 +17,7 @@ export const MenuArchiveToggle = ({ archiveToggleClick, inactiveCount }: MenuArc
         onClick={archiveToggleClick}
         disabled={inactiveCount < 1}
         variant="secondary"
-        className="w-full group mb-1 cursor-pointer bg-background p-0 transition duration-300 focus-visible:outline-none ring-inset focus-visible:ring-offset-0 focus:ring-foreground hover:bg-accent/50 hover:text-accent-foreground
+        className="w-full group mb-1 cursor-pointer bg-background p-0 transition duration-300 focus-visible:outline-none ring-inset focus-visible:ring-offset-0 focus-visible:ring-foreground hover:bg-accent/50 hover:text-accent-foreground
         group-data-[submenu=true]/archived:h-8"
       >
         <div className="w-14 py-2 flex justify-center items-center">

frontend/src/modules/common/nav-sheet/sheet-account.tsx

@@ -28,7 +28,7 @@ const AccountButton: React.FC<AccountButtonProps> = ({ lucide: Icon, label, id,
     to={action}
     className={cn(
       buttonVariants({ variant: 'ghost', size: 'lg' }),
-      'data-[sign-out=true]:text-red-600 hover:bg-accent/50 w-full justify-start text-left focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'data-[sign-out=true]:text-red-600 hover:bg-accent/50 w-full justify-start text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
     )}
   >
     <Icon className="mr-2 h-4 w-4" aria-hidden="true" />

frontend/src/modules/common/nav-sheet/sheet-menu-items.tsx

@@ -30,7 +30,7 @@ export const SheetMenuItem = ({ item, className, searchResults }: SheetMenuItemP
       data-active={isActive}
       resetScroll={false}
       className={cn(
-        'group/menuItem h-14 w-full flex my-1 cursor-pointer items-start justify-start space-x-1 rounded p-0 focus:outline-none ring-2 ring-inset ring-transparent focus:ring-foreground hover:bg-accent/50 hover:text-accent-foreground data-[subitem=true]:h-12 data-[active=true]:ring-transparent data-[active=true]:bg-accent',
+        'group/menuItem h-14 w-full flex my-1 cursor-pointer items-start justify-start space-x-1 rounded p-0 focus:outline-none ring-2 ring-inset ring-transparent focus-visible:ring-foreground hover:bg-accent/50 hover:text-accent-foreground data-[subitem=true]:h-12 data-[active=true]:ring-transparent data-[active=true]:bg-accent',
         className,
       )}
       aria-label={item.name}

frontend/src/modules/common/nav-sheet/sheet-menu-options/menu-item-options.tsx

@@ -66,7 +66,7 @@ export const MenuItemOptions = ({ item }: MenuItemOptionsProps) => {
       data-subitem={!item.submenu}
       data-archived={item.membership.archived}
       className="group/optionsItem flex relative items-center h-14 w-full p-0 pr-2 justify-start rounded focus:outline-none
-        ring-inset ring-muted/25 focus:ring-foreground hover:bg-accent/50 hover:text-accent-foreground ring-1 data-[archived=false]:cursor-grab
+        ring-inset ring-muted/25 focus-visible:ring-foreground hover:bg-accent/50 hover:text-accent-foreground ring-1 data-[archived=false]:cursor-grab
         group-data-[submenu=false]/menuOptions:h-12"
     >
       {status === 'pending' && (

frontend/src/modules/common/page-nav.tsx

@@ -5,7 +5,6 @@ import { useInView } from 'react-intersection-observer';
 import { AvatarWrap } from '~/modules/common/avatar-wrap';
 import StickyBox from '~/modules/common/sticky-box';
 import { cn } from '~/utils/cn';
-import { nanoid } from '~/utils/nanoid';
 
 export type PageNavTab = {
   id: string;
@@ -53,7 +52,7 @@ export const PageNav = ({ title, avatar, tabs, className = '' }: Props) => {
           <Link
             key={id}
             resetScroll={false}
-            className="relative p-2 lg:px-4 rounded-sm outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            className="relative p-2 lg:px-4 rounded-sm outline-none sm:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             to={path}
             params={true}
             activeOptions={{ exact: true, includeSearch: false }}
@@ -63,8 +62,9 @@ export const PageNav = ({ title, avatar, tabs, className = '' }: Props) => {
               <>
                 {t(label)}
                 {isActive && (
-                  <motion.div
-                    key={nanoid()}
+                  <motion.span
+                    initial={false}
+                    layoutId="page-nav-active"
                     transition={{ type: 'spring', duration: 0.4, bounce: 0, delay: 0.1 }}
                     className="h-1 bg-primary rounded-sm w-[calc(100%-1rem)] absolute bottom-0 left-2"
                   />

frontend/src/modules/common/query-combobox.tsx

@@ -18,9 +18,11 @@ import Spinner from './spinner';
 export function QueryCombobox({ onChange, value }: { value: string[]; onChange: (items: string[]) => void }) {
   const { t } = useTranslation();
   const { ref, bounds } = useMeasure<HTMLDivElement>();
+
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState<string[]>(value);
   const [searchQuery, setSearchQuery] = useState('');
+
   const debouncedSearchQuery = useDebounce(searchQuery, 300);
 
   const handleUnselect = (item: string) => {
@@ -59,10 +61,6 @@ export function QueryCombobox({ onChange, value }: { value: string[]; onChange:
     onChange(selected);
   }, [selected]);
 
-  useEffect(() => {
-    setSelected(value);
-  }, [value]);
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -80,7 +78,7 @@ export function QueryCombobox({ onChange, value }: { value: string[]; onChange:
                 {el}
                 <button
                   type="button"
-                  className="py-1 m-[-.25rem] ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                  className="py-1 m-[-.25rem] ml-1 rounded-full outline-none sm:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();

frontend/src/modules/common/sheet-nav.tsx

@@ -30,7 +30,7 @@ export const SheetNav = ({ tabs }: Props) => {
               </Button>
 
               <motion.div
-                key={nanoid()}
+                layoutId={nanoid()}
                 transition={{ type: 'spring', duration: 0.4, bounce: 0, delay: 0.1 }}
                 className="h-1 bg-primary rounded-sm w-[calc(100%-1rem)] absolute bottom-0 left-2 peer-data-[current=false]:hidden"
               />

frontend/src/modules/common/wait-list-form.tsx

@@ -96,7 +96,7 @@ export const WaitListForm = ({
               <FormControl>
                 <Input
                   {...field}
-                  className="block xs:min-w-80 w-full py-6 h-14 px-8 rounded-full border border-gray-400/40 bg-background/50 text-base/6 ring-4 ring-primary/10 transition focus:border-gray-400 focus:outline-none focus:ring-primary/20"
+                  className="block xs:min-w-80 w-full py-6 h-14 px-8 rounded-full border border-gray-400/40 bg-background/50 text-base/6 ring-4 ring-primary/10 transition focus:border-gray-400 focus:outline-none focus-visible:ring-primary/20"
                   type="email"
                   disabled={!emailField}
                   readOnly={!emailField}

frontend/src/modules/marketing/newsletter.tsx

@@ -40,7 +40,7 @@ const NewsletterForm = () => {
           autoComplete="email"
           aria-label="Email for newsletter"
           required
-          className="block w-full rounded-2xl border border-gray-300/40 bg-transparent py-4 pl-6 pr-20 text-base/6 text-gray-200 ring-4 ring-primary/10 transition placeholder:text-gray-300/50 focus:border-gray-300 focus:outline-none focus:ring-primary/20"
+          className="block w-full rounded-2xl border border-gray-300/40 bg-transparent py-4 pl-6 pr-20 text-base/6 text-gray-200 ring-4 ring-primary/10 transition placeholder:text-gray-300/50 focus:border-gray-300 focus:outline-none focus-visible:ring-primary/20"
         />
         <div className="absolute inset-y-1 right-1 flex justify-end">
           <SubmitButton variant="link" aria-label="Submit email for newsletter" loading={isPending} className="h-full text-white rounded-xl">

frontend/src/modules/organizations/members-table/columns.tsx

@@ -67,7 +67,9 @@ export const useColumns = (isAdmin: boolean, isSheet: boolean, organizationId: s
         visible: !isMobile,
         renderHeaderCell: HeaderCell,
         renderCell: ({ row }) => (
-          <div className="inline-flex items-center gap-1 relative group h-full w-full">{row.membership ? t(row.membership.role) : '-'}</div>
+          <div className="inline-flex items-center gap-1 relative group h-full w-full">
+            {row.membership ? t(`common:${row.membership.role}`) : '-'}
+          </div>
         ),
         width: 100,
         ...(isAdmin && {

frontend/src/modules/organizations/members-table/table-header.tsx

@@ -13,6 +13,7 @@ import type { MemberSearch, MembersTableProps } from '~/modules/organizations/me
 import { Badge } from '~/modules/ui/badge';
 import { Button } from '~/modules/ui/button';
 import type { BaseTableHeaderProps, BaseTableMethods, Member } from '~/types/common';
+import { nanoid } from '#/utils/nanoid';
 
 type MembersTableHeaderProps = MembersTableProps &
   BaseTableMethods &
@@ -103,8 +104,8 @@ export const MembersTableHeader = ({
               isAdmin && (
                 //TODO mb rework sheet to find a way use dialog with ref in sheet
                 <Button asChild onClick={() => openInviteDialog(isSheet ? null : containerRef.current)}>
-                  <motion.button transition={{ duration: 0.1 }} layoutId="members-filter-bar-button">
-                    <motion.span layoutId="members-filter-bar-icon">
+                  <motion.button transition={{ duration: 0.1 }} layoutId={nanoid()} initial={false}>
+                    <motion.span>
                       <Mail size={16} />
                     </motion.span>
                     <span className="ml-1">{t('common:invite')}</span>

frontend/src/modules/organizations/members-table/table.tsx

@@ -89,7 +89,7 @@ const BaseDataTable = memo(
       <DataTable<Member>
         {...{
           columns: columns.filter((column) => column.visible),
-          rowHeight: 42,
+          rowHeight: 50,
           enableVirtualization: false,
           onRowsChange,
           rows,

frontend/src/modules/organizations/organizations-table/columns.tsx

@@ -53,7 +53,7 @@ export const useColumns = (callback: (organizations: Organization[]) => void) =>
         sortable: false,
         visible: !isMobile,
         renderHeaderCell: HeaderCell,
-        renderCell: ({ row }) => (row.membership?.role ? t(row.membership.role) : '-'),
+        renderCell: ({ row }) => (row.membership?.role ? t(`common:${row.membership.role}`) : '-'),
         width: 120,
       },
       {

frontend/src/modules/organizations/organizations-table/table.tsx

@@ -78,7 +78,7 @@ const BaseDataTable = memo(
           columns: columns.filter((column) => column.visible),
           rows,
           totalCount,
-          rowHeight: 42,
+          rowHeight: 50,
           rowKeyGetter: (row) => row.id,
           error,
           isLoading,

frontend/src/modules/system/requests-table/table.tsx

@@ -50,7 +50,7 @@ const BaseRequestsTable = memo(
           columns: columns.filter((column) => column.visible),
           rows,
           totalCount,
-          rowHeight: 42,
+          rowHeight: 50,
           rowKeyGetter: (row) => row.id,
           error,
           isLoading,

frontend/src/modules/ui/badge.tsx

@@ -4,7 +4,7 @@ import type * as React from 'react';
 import { cn } from '~/utils/cn';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   {
     variants: {
       variant: {

frontend/src/modules/ui/breadcrumb.tsx

@@ -33,7 +33,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn('transition-colors hover:text-foreground outline-none focus:ring-2 focus:ring-ring rounded-sm', className)}
+      className={cn('transition-colors hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm', className)}
       {...props}
     />
   );

frontend/src/modules/ui/dialog.tsx

@@ -46,7 +46,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {!hideClose && (
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <DialogPrimitive.Close className="ring-offset-background focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
           <X className="h-6 w-6" strokeWidth={1.25} />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

frontend/src/modules/ui/input.tsx

@@ -5,7 +5,7 @@ import { cn } from '~/utils/cn';
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 export const inputClass =
-  'border-input bg-background ring-offset-background placeholder:text-muted-foreground  focus-visible:ring-ring max-sm:focus-visible:ring-transparent max-sm:focus:ring-offset-0 flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+  'border-input bg-background ring-offset-background placeholder:text-muted-foreground  focus-visible:ring-ring max-focus-visible:ring-transparent max-focus-visible:ring-offset-0 flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
   return <input type={type} className={cn(inputClass, className)} ref={ref} {...props} />;

frontend/src/modules/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input bg-background ring-offset-background placeholder:text-muted-foreground max-sm:focus:ring-transparent max-sm:focus:ring-offset-0 focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground max-focus-visible:ring-transparent max-focus-visible:ring-offset-0 focus-visible:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}