Introduce max height to modal and make inner content scrollable

Author: sanne-san

assets/js/dashboard/components/sort-button.tsx

@@ -15,24 +15,23 @@ export const SortButton = ({
   return (
     <button
       onClick={toggleSort}
-      className={classNames('group', 'hover:underline', 'relative')}
+      className={classNames('group', 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-100', 'relative')}
     >
       {children}
       <span
         title={next.hint}
         className={classNames(
           'absolute',
-          'rounded inline-block h-4 w-4',
+          'rounded inline-block size-4',
           'ml-1',
           {
             [SortDirection.asc]: 'rotate-180',
             [SortDirection.desc]: 'rotate-0'
           }[sortDirection ?? next.direction],
           !sortDirection && 'opacity-0',
           !sortDirection && 'group-hover:opacity-100',
-          sortDirection &&
-            'group-hover:bg-gray-100 dark:group-hover:bg-gray-900',
-          'transition'
+          'group-hover:bg-gray-100 dark:group-hover:bg-gray-900',
+          'transition-all duration-100'
         )}
       >
         ↓

assets/js/dashboard/components/table.tsx

@@ -38,7 +38,7 @@ export const TableHeaderCell = ({
   return (
     <th
       className={classNames(
-        'p-2 text-xs font-bold text-gray-500 dark:text-gray-400 tracking-wide',
+        'p-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
         className
       )}
       align={align}
@@ -82,7 +82,7 @@ export const ItemRow = <T extends Record<string, string | number | ReactNode>>({
   columns: ColumnConfiguraton<T>[]
 }) => {
   return (
-    <tr className="text-sm dark:text-gray-200">
+    <tr className="group text-sm dark:text-gray-200">
       {columns.map(({ key, width, align, renderValue, renderItem }) => (
         <TableCell
           key={`${(pageIndex ?? null) === null ? '' : `page_${pageIndex}_`}row_${rowIndex}_${String(key)}`}
@@ -131,13 +131,13 @@ export const Table = <T extends Record<string, string | number | ReactNode>>({
   }
 
   return (
-    <table className="w-max overflow-x-auto md:w-full table-striped table-fixed">
-      <thead>
-        <tr className="text-xs font-bold text-gray-500 dark:text-gray-400">
+    <table className="w-full border-collapse table-striped table-fixed">
+      <thead className="sticky top-0 bg-white dark:bg-gray-900 z-10">
+        <tr className="text-xs font-semibold text-gray-500 dark:text-gray-400">
           {columns.map((column) => (
             <TableHeaderCell
               key={`header_${String(column.key)}`}
-              className={classNames('p-2 tracking-wide', column.width)}
+              className={classNames('p-2', column.width)}
               align={column.align}
             >
               {column.onSort ? (

assets/js/dashboard/components/tabs.tsx

@@ -160,7 +160,7 @@ const Items = ({
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1 text-sm"
+            className="ml-auto w-full py-1"
             onSearch={handleSearchInput}
           />
         </div>

assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx

@@ -84,7 +84,7 @@ export const SearchableSegmentsSection = ({
           <SearchInput
             searchRef={searchRef}
             placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1 text-sm"
+            className="ml-auto w-full py-1"
             onSearch={handleSearchInput}
           />
         )}

assets/js/dashboard/stats/modals/breakdown-table.tsx

@@ -38,7 +38,7 @@ export const BreakdownTable = <TListItem extends { name: string }>({
   const searchRef = useRef<HTMLInputElement>(null)
 
   return (
-    <div className="w-full h-full">
+    <>
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-x-2">
           <h1 className="text-lg font-bold dark:text-gray-100">{title}</h1>
@@ -54,8 +54,8 @@ export const BreakdownTable = <TListItem extends { name: string }>({
           />
         )}
       </div>
-      <div className="my-3 border-b border-gray-250 dark:border-gray-700"></div>
-      <div style={{ minHeight: `${MIN_HEIGHT_PX}px` }}>
+      <div className="my-4 border-b border-gray-250 dark:border-gray-700"></div>
+      <div className="flex-1 overflow-y-auto pr-3 -mr-3" style={{ minHeight: `${MIN_HEIGHT_PX}px` }}>
         {displayError && status === 'error' && <ErrorMessage error={error} />}
         {isPending && <InitialLoadingSpinner />}
         {data && <Table<TListItem> data={data} columns={columns} />}
@@ -66,7 +66,7 @@ export const BreakdownTable = <TListItem extends { name: string }>({
           />
         )}
       </div>
-    </div>
+    </>
   )
 }
 

assets/js/dashboard/stats/modals/devices/browser-versions-modal.js

@@ -14,7 +14,7 @@ function BrowserVersionsModal() {
   const site = useSiteContext()
 
   const reportInfo = {
-    title: 'Browser Versions',
+    title: 'Browser versions',
     dimension: 'browser_version',
     endpoint: url.apiPath(site, '/browser-versions'),
     dimensionLabel: 'Browser version',

assets/js/dashboard/stats/modals/devices/operating-system-versions-modal.js

@@ -14,7 +14,7 @@ function OperatingSystemVersionsModal() {
   const site = useSiteContext()
 
   const reportInfo = {
-    title: 'Operating System Versions',
+    title: 'Operating system versions',
     dimension: 'os_version',
     endpoint: url.apiPath(site, '/operating-system-versions'),
     dimensionLabel: 'Operating system version',

assets/js/dashboard/stats/modals/devices/operating-systems-modal.js

@@ -14,7 +14,7 @@ function OperatingSystemsModal() {
   const site = useSiteContext()
 
   const reportInfo = {
-    title: 'Operating Systems',
+    title: 'Operating systems',
     dimension: 'os',
     endpoint: url.apiPath(site, '/operating-systems'),
     dimensionLabel: 'Operating system',

assets/js/dashboard/stats/modals/devices/screen-sizes.js

@@ -13,7 +13,7 @@ function ScreenSizesModal() {
   const site = useSiteContext()
 
   const reportInfo = {
-    title: 'Screen Sizes',
+    title: 'Screen sizes',
     dimension: 'screen',
     endpoint: url.apiPath(site, '/screen-sizes'),
     dimensionLabel: 'Screen size',

assets/js/dashboard/stats/modals/filter-modal.js

@@ -170,7 +170,7 @@ class FilterModal extends React.Component {
   render() {
     return (
       <Modal maxWidth="460px">
-        <h1 className="text-xl font-bold dark:text-gray-100">
+        <h1 className="text-lg font-bold dark:text-gray-100">
           Filter by {formatFilterGroup(this.props.modalType)}
         </h1>