chore(apps/frontend-*): resolve padding and margin issues with new frontend design elements

Author: sjschlapbach

apps/frontend-manage/src/components/catalog/actions/ObjectImport.tsx

@@ -16,6 +16,7 @@ import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
 import AddObjectToCatalogButton from '../administration/AddObjectToCatalogButton'
 import AddObjectToCatalogModal from '../administration/AddObjectToCatalogModal'
 import CatalogCollectionListItem from '../administration/CatalogCollectionListItem'
@@ -93,7 +94,7 @@ function ObjectImport({
         </Link>
       )}
       <H2
-        className={{ root: 'md:-mb-5' }}
+        className={{ root: twMerge(!collectionName && 'md:-mb-5') }}
         data={{ cy: 'catalog-browser-title' }}
       >
         {collectionName

apps/frontend-manage/src/components/questions/manipulation/ElementEditForm.tsx

@@ -171,7 +171,7 @@ function ElementEditForm({
               dataSecondaryAction={{ cy: 'close-element-modal-button' }}
               className={{
                 title: 'text-xl',
-                content: 'text-sm md:text-base 2xl:max-w-[1400px]',
+                content: 'h-max text-sm md:text-base 2xl:max-w-[1400px]',
                 footer: twMerge(isTemplate ? 'justify-end' : 'justify-between'),
               }}
               dataCloseButton={{ cy: 'close-element-modal' }}

apps/frontend-pwa/src/components/common/LiveQuizLeaderboard.tsx

@@ -87,7 +87,9 @@ function LiveQuizLeaderboard({
   const leaderboard = data.liveQuizLeaderboard ?? []
   return (
     <div className={twMerge('space-y-4 pt-4', className)}>
-      <H2>{t('shared.leaderboard.lqLeaderboard')}</H2>
+      <H2 className={{ root: '-mb-2' }}>
+        {t('shared.leaderboard.lqLeaderboard')}
+      </H2>
       <div>
         {leaderboard.length && leaderboard.length > 0 ? (
           <Leaderboard

apps/frontend-pwa/src/pages/session/[id].tsx

@@ -208,7 +208,7 @@ function Index({ id }: { id: string }) {
                 <LiveQuizLeaderboard quizId={id} />
               </div>
             ) : (
-              <UserNotification type="info">
+              <UserNotification type="info" className={{ root: 'mt-4' }}>
                 {t('pwa.liveQuiz.noActiveQuestion')}
               </UserNotification>
             )