Skip to content

Commit

Permalink
Merge pull request #1303 from Shelf-nu/fix-booking-assets-list-name-o…
Browse files Browse the repository at this point in the history 
…verflow

fix: bugs with overflow related to lists and tables in certain views
  • Loading branch information
@DonKoko
DonKoko authored Sep 4, 2024
2 parents bc108db + 4084125 commit 60fbe84
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 69 deletions.
38 changes: 18 additions & 20 deletions app/components/booking/booking-assets-column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,10 +215,10 @@ const ListAssetContent = ({ item }: { item: AssetWithBooking }) => {

return (
<>
<Td className="w-full p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<Td className="w-full whitespace-normal p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<div className="flex items-center gap-3">
<div className="flex size-12 items-center justify-center">
<div className="relative flex size-12 shrink-0 items-center justify-center">
<AssetImage
asset={{
assetId: item.id,
Expand All @@ -229,23 +229,21 @@ const ListAssetContent = ({ item }: { item: AssetWithBooking }) => {
className="size-full rounded-[4px] border object-cover"
/>
</div>
<div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-0">
<div className="min-w-[130px]">
<span className="word-break mb-1 block font-medium">
<Button
to={`/assets/${item.id}`}
variant="link"
className="text-gray-900 hover:text-gray-700"
>
{item.title}
</Button>
</span>
<div>
<AssetStatusBadge
status={item.status}
availableToBook={item.availableToBook}
/>
</div>
<div className="min-w-[180px]">
<span className="word-break mb-1 block font-medium">
<Button
to={`/assets/${item.id}`}
variant="link"
className="text-left text-gray-900 hover:text-gray-700"
>
{item.title}
</Button>
</span>
<div>
<AssetStatusBadge
status={item.status}
availableToBook={item.availableToBook}
/>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions app/components/kits/actions-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function ActionsDropdown({

if (!isHydrated) {
return (
<Button variant="secondary" to="#">
<Button variant="secondary" to="#" className={fullWidth && "w-full"}>
<span className="flex items-center gap-2">
Actions <ChevronRight className="chev rotate-90" />
</span>
Expand All @@ -32,7 +32,7 @@ export default function ActionsDropdown({
}

return (
<div className="actions-dropdown flex">
<div className={tw("actions-dropdown flex", fullWidth && "w-full")}>
<ConditionalActionsDropdown fullWidth={fullWidth} />
</div>
);
Expand Down Expand Up @@ -92,6 +92,7 @@ function ConditionalActionsDropdown({ fullWidth }: { fullWidth?: boolean }) {
<Button
variant="secondary"
className="actions-dropdown sm:hidden"
width="full"
onClick={() => setOpen(true)}
>
<span className="flex items-center gap-2">
Expand Down
2 changes: 1 addition & 1 deletion app/components/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function Td({ children, className, ...props }: TdProps) {
return (
<td
className={tw(
"max-w-[200px] truncate whitespace-nowrap border-b p-4 md:px-6",
"max-w-[250px] truncate whitespace-nowrap border-b p-4 md:px-6",
className
)}
{...props}
Expand Down
47 changes: 18 additions & 29 deletions app/routes/_layout+/kits.$kitId.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { z } from "zod";
import { CustodyCard } from "~/components/assets/asset-custody-card";
import { AssetImage } from "~/components/assets/asset-image";
import { AssetStatusBadge } from "~/components/assets/asset-status-badge";
import { ChevronRight } from "~/components/icons/library";
import ActionsDropdown from "~/components/kits/actions-dropdown";
import AssetRowActionsDropdown from "~/components/kits/asset-row-actions-dropdown";
import KitImage from "~/components/kits/kit-image";
Expand Down Expand Up @@ -558,51 +557,41 @@ function ListContent({
};
}>;
}) {
const { id, mainImage, mainImageExpiration, title, location, category } =
item;
const { location, category } = item;

const { roles } = useUserRoleHelper();
return (
<>
<Td className="w-full p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<Td className="w-full whitespace-normal p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<div className="flex items-center gap-3">
<div className="flex size-12 items-center justify-center">
<div className="relative flex size-12 shrink-0 items-center justify-center">
<AssetImage
asset={{
assetId: id,
mainImage,
mainImageExpiration,
alt: title,
assetId: item.id,
mainImage: item.mainImage,
mainImageExpiration: item.mainImageExpiration,
alt: item.title,
}}
className="size-full rounded-[4px] border object-cover"
/>
</div>
<div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-0">
<Button
to={`/assets/${item.id}`}
variant="link"
className="mb-1 text-gray-900 hover:text-gray-700"
>
{item.title}
</Button>
<div className="min-w-[180px]">
<span className="word-break mb-1 block font-medium">
<Button
to={`/assets/${item.id}`}
variant="link"
className="text-left text-gray-900 hover:text-gray-700"
>
{item.title}
</Button>
</span>
<AssetStatusBadge
status={item.status}
availableToBook={item.availableToBook}
/>
<div className="block md:hidden">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
</Badge>
) : null}
</div>
</div>
</div>

<button className="block md:hidden">
<ChevronRight />
</button>
</div>
</Td>

Expand Down
31 changes: 14 additions & 17 deletions app/routes/_layout+/locations.$locationId.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { useLoaderData, useNavigate } from "@remix-run/react";
import mapCss from "maplibre-gl/dist/maplibre-gl.css?url";
import { z } from "zod";
import { AssetImage } from "~/components/assets/asset-image";
import { ChevronRight } from "~/components/icons/library";
import ContextualModal from "~/components/layout/contextual-modal";
import Header from "~/components/layout/header";
import type { HeaderData } from "~/components/layout/header/types";
Expand Down Expand Up @@ -294,10 +293,10 @@ const ListAssetContent = ({
const { category, tags } = item;
return (
<>
<Td className="w-full p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<Td className="w-full whitespace-normal p-0 md:p-0">
<div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
<div className="flex items-center gap-3">
<div className="flex size-12 items-center justify-center">
<div className="relative flex size-12 shrink-0 items-center justify-center">
<AssetImage
asset={{
assetId: item.id,
Expand All @@ -308,23 +307,21 @@ const ListAssetContent = ({
className="size-full rounded-[4px] border object-cover"
/>
</div>
<div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-0">
<div className="font-medium">{item.title}</div>
<div className="block md:hidden">
{category ? (
<Badge color={category.color} withDot={false}>
{category.name}
</Badge>
) : null}
</div>
<div className="min-w-[180px]">
<span className="word-break mb-1 block font-medium">
<Button
to={`/assets/${item.id}`}
variant="link"
className="text-left text-gray-900 hover:text-gray-700"
>
{item.title}
</Button>
</span>
</div>
</div>

<button className="block md:hidden">
<ChevronRight />
</button>
</div>
</Td>

<Td>
{category ? (
<Badge color={category.color} withDot={false}>
Expand Down

0 comments on commit 60fbe84

Please sign in to comment.