Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/FilesBuckets.tsx (TypeScript)

Code before:
                    <TableHead>Policies</TableHead>
                    {/* <TableHead>Visibility</TableHead> */}
                    {/* <TableHead>Created at</TableHead>
                    <TableHead>Updated at</TableHead> */}
                    <TableHead>File size limit</TableHead>
                    <TableHead>Allowed MIME types</TableHead>
                    {/* <TableHead>type</TableHead> */}
                    {/* <TableHead>owner</TableHead> */}
                    <TableHead />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filesBuckets.length === 0 && filterString.length > 0 && (
                    <TableRow>
                      <TableCell colSpan={3}>
                        <p className="text-sm text-foreground">No results found</p>
                        <p className="text-sm text-foreground-light">
                          Your search for "{filterString}" did not return any results
                        </p>
                      </TableCell>
                    </TableRow>
                  )}
                  {filesBuckets.map((bucket) => (
                    <TableRow
                      key={bucket.id}
                      onClick={() => {
                        router.push(
                          `/project/${ref}/storage/files/buckets/${encodeURIComponent(bucket.id)}`
                        )
                      }}
                      className="cursor-pointer"
                    >
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <p className="text-foreground">{bucket.name}</p>
                          {bucket.public && <Badge variant="warning">Public</Badge>}
                        </div>
                      </TableCell>
                      <TableCell>
                        <p className="text-foreground-light">{getPolicyCount(bucket.name)}</p>
                      </TableCell>

                      <TableCell>
                        <p
                          className={
                            bucket.file_size_limit
                              ? 'text-foreground-light'
                              : 'text-foreground-muted'
                          }
                        >
                          {bucket.file_size_limit

Review comment (suggestion):
understandably we cant make table rows an `a` element, but what i like to do for this if we're making the row a link is to also consider if the meta key is pressed down in the onClick event so that we can still mimic the native browser event of opening links in a new tab if the meta key is pressed

i'll add this in no worries! 🙂 🙏 

Code after:
                <TableBody>
                  {filesBuckets.length === 0 && filterString.length > 0 && (
                    <TableRow>
                      <TableCell colSpan={3}>
                        <p className="text-sm text-foreground">No results found</p>
                        <p className="text-sm text-foreground-light">
                          Your search for "{filterString}" did not return any results
                        </p>
                      </TableCell>
                    </TableRow>
                  )}
                  {filesBuckets.map((bucket) => (
                    <TableRow
                      key={bucket.id}
                      className="cursor-pointer"
                      onClick={(event) => {
                        const url = `/project/${ref}/storage/files/buckets/${bucket.id}`
                        if (event.metaKey) window.open(url, '_blank')
                        else router.push(url)
                      }}
                    >
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <p className="text-foreground">{bucket.name}</p>
                          {bucket.public && <Badge variant="warning">Public</Badge>}
                        </div>
                      </TableCell>

                      <TableCell>
                        <p className="text-foreground-light">{getPolicyCount(bucket.name)}</p>
                      </TableCell>

                      <TableCell>
                        <p
                          className={
                            bucket.file_size_limit
                              ? 'text-foreground-light'
                              : 'text-foreground-muted'
                          }
                        >
                          {bucket.file_size_limit
                            ? formatBytes(bucket.file_size_limit)
                            : `Unset (${formattedGlobalUploadLimit})`}
                        </p>
                      </TableCell>

                      <TableCell>
                        <p
                          className={
                            bucket.allowed_mime_types
                              ? 'text-foreground-light'