fix: layout shift on app card hover (#7872)

langgenius · Sep 2, 2024 · 5e4907e · 5e4907e
1 parent bf63c5d
commit 5e4907e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -255,7 +255,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
  e.preventDefault()
  getRedirection(isCurrentWorkspaceEditor, app, push)
  }}
- className='group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
+ className='relative group col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
  >
  <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
  <div className='relative shrink-0'>
@@ -297,17 +297,16 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
  </div>
  </div>
  </div>
- <div
- className={cn(
- 'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-gray-500 group-hover:line-clamp-2 group-hover:max-h-[36px]',
- tags.length ? 'line-clamp-2' : 'line-clamp-4',
- )}
- title={app.description}
- >
- {app.description}
+ <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-gray-500'>
+ <div
+ className={cn(tags.length ? 'line-clamp-2' : 'line-clamp-4', 'group-hover:line-clamp-2')}
+ title={app.description}
+ >
+ {app.description}
+ </div>
  </div>
  <div className={cn(
- 'items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
+ 'absolute bottom-1 left-0 right-0 items-center shrink-0 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]',
  tags.length ? 'flex' : '!hidden group-hover:!flex',
  )}>
  {isCurrentWorkspaceEditor && (

diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
@@ -23,7 +23,7 @@ const AppCard = ({
  const { t } = useTranslation()
  const { app: appBasicInfo } = app
  return (
- <div className={cn('group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
+ <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
  <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
  <div className='relative shrink-0'>
  <AppIcon
@@ -64,9 +64,13 @@ const AppCard = ({
  </div>
  </div>
  </div>
- <div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4 group-hover:line-clamp-2 group-hover:h-9'>{app.description}</div>
+ <div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-gray-500 ">
+ <div className='line-clamp-4 group-hover:line-clamp-2'>
+ {app.description}
+ </div>
+ </div>
  {isExplore && canCreate && (
- <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
+ <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
  <div className={cn('flex items-center w-full space-x-2')}>
  <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
  <PlusIcon className='w-4 h-4 mr-1' />
@@ -76,7 +80,7 @@ const AppCard = ({
  </div>
  )}
  {!isExplore && (
- <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
+ <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
  <div className={cn('flex items-center w-full space-x-2')}>
  <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
  <PlusIcon className='w-4 h-4 mr-1' />