fix: team availability data table scrolling (#13036)

* fixed data table scrolling for team availability

* Update packages/features/shell/Shell.tsx

* nit

apps/web/components/booking/BookingListItem.tsx

@@ -384,7 +384,7 @@ function BookingListItem(booking: BookingItemProps) {
                         target="_blank"
                         title={locationToDisplay}
                         rel="noreferrer"
-                        className="text-sm leading-6 text-blue-600 hover:underline">
+                        className="text-sm leading-6 text-blue-600 hover:underline dark:text-blue-400">
                         <div className="flex items-center gap-2">
                           {provider?.iconUrl && (
                             <img

packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx

@@ -130,7 +130,7 @@ export function AvailabilitySliderTable() {
         id: "slider",
         header: () => {
           return (
-            <div className="flex items-center">
+            <div className="flex items-center space-x-2">
               <ButtonGroup containerProps={{ className: "space-x-0" }}>
                 <Button
                   color="minimal"
@@ -145,7 +145,7 @@ export function AvailabilitySliderTable() {
                   variant="icon"
                 />
               </ButtonGroup>
-              <span>{browsingDate.format("DD dddd MMM, YYYY")}</span>
+              <span>{browsingDate.format("LL")}</span>
             </div>
           );
         },
@@ -192,8 +192,9 @@ export function AvailabilitySliderTable() {
         browsingDate: browsingDate.toDate(),
       })}>
       <>
-        <div className="relative">
+        <div className="relative -mx-2 w-[calc(100%+16px)] overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6">
           <DataTable
+            variant="compact"
             searchKey="member"
             tableContainerRef={tableContainerRef}
             columns={memorisedColumns}

packages/features/timezone-buddy/components/TimeDial.tsx

@@ -106,7 +106,7 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
 
   return (
     <>
-      <div className="flex items-end overflow-auto text-sm">
+      <div className="flex items-end justify-center overflow-auto text-sm">
         {days.map((day, i) => {
           if (!day.length) return null;
           const dateWithDaySet = usersTimezoneDate.add(i - 1, "day");
@@ -165,7 +165,7 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
                       key={h}
                       className={classNames(
                         "flex h-8 flex-col items-center justify-center",
-                        isInRange ? "text-emphasis dark:text-inverted" : "",
+                        isInRange ? "text-emphasis" : "",
                         isInRange && !rangeOverlap ? "bg-success" : "",
                         hours ? "" : "bg-subtle font-medium"
                       )}

packages/ui/components/data-table/DataTableToolbar.tsx

@@ -40,7 +40,7 @@ export function DataTableToolbar<TData>({
   const { t } = useLocale();
 
   return (
-    <div className="sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
+    <div className="flex items-center justify-end space-x-2 py-4">
       {searchKey && (
         <Input
           className="max-w-64 mb-0 mr-auto rounded-md"

packages/ui/components/data-table/index.tsx

@@ -38,6 +38,7 @@ export interface DataTableProps<TData, TValue> {
   onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
   CTA?: React.ReactNode;
   tableOverlay?: React.ReactNode;
+  variant?: "default" | "compact";
 }
 
 export function DataTable<TData, TValue>({
@@ -50,6 +51,7 @@ export function DataTable<TData, TValue>({
   tableContainerRef,
   isLoading,
   tableOverlay,
+  variant,
   /** This should only really be used if you dont have actions in a row. */
   onRowMouseclick,
   onScroll,
@@ -102,7 +104,7 @@ export function DataTable<TData, TValue>({
         searchKey={searchKey}
         tableCTA={tableCTA}
       />
-      <div className="border-subtle border" ref={tableContainerRef} onScroll={onScroll}>
+      <div ref={tableContainerRef} onScroll={onScroll}>
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -128,16 +130,18 @@ export function DataTable<TData, TValue>({
             {virtualRows && !isLoading ? (
               virtualRows.map((virtualRow) => {
                 const row = rows[virtualRow.index] as Row<TData>;
-
                 return (
                   <TableRow
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     onClick={() => onRowMouseclick && onRowMouseclick(row)}
-                    className={classNames(onRowMouseclick && "hover:cursor-pointer")}>
+                    className={classNames(
+                      onRowMouseclick && "hover:cursor-pointer",
+                      variant === "compact" && "!border-0"
+                    )}>
                     {row.getVisibleCells().map((cell) => {
                       return (
-                        <TableCell key={cell.id}>
+                        <TableCell key={cell.id} className={classNames(variant === "compact" && "p-1.5")}>
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </TableCell>
                       );

packages/ui/components/form/toggleGroup/ToggleGroup.tsx

@@ -54,7 +54,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
                 "aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition-colors",
                 option.disabled
                   ? "text-gray-400 hover:cursor-not-allowed"
-                  : "text-default [&[aria-checked='false']]:hover:bg-emphasis",
+                  : "text-default [&[aria-checked='false']]:hover:text-emphasis",
                 isFullWidth && "w-full"
               )}>
               <div className="item-center flex justify-center ">

packages/ui/components/table/TableNew.tsx

@@ -5,7 +5,11 @@ import { classNames } from "@calcom/lib";
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
     <div className="w-full overflow-auto md:overflow-visible">
-      <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
+      <table
+        ref={ref}
+        className={classNames("border-subtle w-full caption-bottom border text-sm", className)}
+        {...props}
+      />
     </div>
   )
 );
@@ -68,7 +72,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<
   ({ className, ...props }, ref) => (
     <td
       ref={ref}
-      className={classNames("text-default p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      className={classNames("text-default px-2 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)}
       {...props}
     />
   )