Update list padding

apps/web/src/app/app/(primary_layout)/home/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function HomePage() {
   return (
-    <AppPageLayout header={<HomePageHeader />}>
+    <AppPageLayout headerSizeVariant="list" header={<HomePageHeader />}>
       <HomePageController />
     </AppPageLayout>
   );

apps/web/src/components/features/modal/DashboardFilterDiffModall.tsx

@@ -81,6 +81,7 @@ const ModalSidebar: React.FC<{
 
   return (
     <AppPageLayout
+      headerSizeVariant="default"
       headerBorderVariant="ghost"
       header={SidebarHeader}
       scrollable
@@ -127,6 +128,7 @@ const Content: React.FC<{
 }> = ({ className, selectedMetric }) => {
   return (
     <AppPageLayout
+      headerSizeVariant="default"
       headerClassName="px-3!"
       header={useMemo(
         () => (

apps/web/src/components/ui/buttons/Button.tsx

@@ -67,7 +67,12 @@ export const buttonVariants = cva(
       {
         iconButton: true,
         size: 'small',
-        className: 'w-5 min-w-5 max-w-5'
+        className: 'w-5 min-w-5 max-w-5 px-1.5'
+      },
+      {
+        iconButton: false,
+        size: 'small',
+        className: 'px-1.5'
       }
     ],
     defaultVariants: {

apps/web/src/components/ui/card/CollapisbleFileCard.tsx

@@ -296,10 +296,10 @@ const CollapseToggleIcon = React.memo(
           {showChevron && (
             <motion.div
               key="chevron"
-              initial={{ opacity: 0, rotate: 0 }}
-              animate={{ opacity: 1, rotate: !isCollapsed ? 180 : 0 }}
+              initial={{ opacity: 0, rotate: -90 }}
+              animate={{ opacity: 1, rotate: !isCollapsed ? 0 : -90 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.12, ease: 'easeInOut' }}
+              transition={{ duration: 0.165, ease: 'easeInOut' }}
               className={cn(
                 'text-icon-color absolute inset-0 flex h-5 w-5 items-center justify-center text-base'
               )}>

apps/web/src/components/ui/layouts/AppPageLayout.stories.tsx

@@ -68,17 +68,6 @@ export const LongContent: Story = {
   }
 };
 
-/*
-    <AppPageLayout
-      contentContainerId={CHAT_CONTENT_CONTAINER_ID}
-      header={<ChatHeader />}
-      headerBorderVariant="ghost"
-      scrollable
-      className="flex h-full w-full min-w-[295px] flex-col">
-      <ChatContent />
-    </AppPageLayout>
-*/
-
 export const LongContentGhostHeader: Story = {
   args: {
     contentContainerId: 'chat-container-content',

apps/web/src/components/ui/typography/Paragraph.tsx

@@ -14,8 +14,8 @@ const paragraphVariants = cva('', {
     },
     lineHeight: {
       none: 'leading-[1]!',
-      sm: 'leading-1.3!',
-      base: 'leading-1.3!',
+      sm: 'leading-1.5!',
+      base: 'leading-1.5!',
       md: 'leading-[1.4]!',
       lg: 'leading-[1.5]!'
     }

apps/web/src/components/ui/typography/TextAndVersionText.tsx

@@ -8,7 +8,7 @@ export const TextAndVersionText = React.memo(
         <Text size={'base'} truncate>
           {text}
         </Text>
-        <Text size={'base'} variant={'secondary'}>
+        <Text size={'sm'} variant={'secondary'}>
           {`Version ${version}`}
         </Text>
       </div>

apps/web/src/controllers/HomePage/HomePageHeader.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
+import { Text } from '@/components/ui/typography/Text';
 
 export const HomePageHeader: React.FC<Record<string, never>> = () => {
-  return <div>Home</div>;
+  return <Text size={'base'}>Home</Text>;
 };

apps/web/src/controllers/TermIndividualController/TermIndividualController.tsx

@@ -30,7 +30,7 @@ export const TermIndividualController: React.FC<{
       }
       rightHidden={!isFetchedTermsList}
       rightChildren={
-        <AppPageLayout header={<TermIndividualHeaderSider />}>
+        <AppPageLayout headerSizeVariant="default" header={<TermIndividualHeaderSider />}>
           <TermIndividualContentSider termId={termId} />
         </AppPageLayout>
       }

apps/web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx

@@ -6,6 +6,7 @@ import { ChatHeader } from './ChatHeader';
 export const ChatContainer = React.memo(({ mounted }: { mounted?: boolean }) => {
   return (
     <AppPageLayout
+      headerSizeVariant="default"
       header={<ChatHeader />}
       headerBorderVariant="ghost"
       scrollable

apps/web/src/layouts/ChatLayout/FileContainer/FileContainer.tsx

@@ -89,6 +89,7 @@ export const FileContainer: React.FC<FileContainerProps> = ({ children }) => {
 
   return (
     <AppPageLayout
+      headerSizeVariant="default"
       className="flex h-full min-w-[380px] flex-col"
       header={useMemo(
         () => (

package.json

@@ -18,6 +18,7 @@
     "db:stop": "pnpm --filter @buster/database run db:stop",
     "db:studio": "pnpm --filter @buster/database run db:studio",
     "dev": "turbo dev",
+    "dev:no-web": "turbo dev --filter \"!@buster-app/web\"",
     "dev:db-init": "turbo run dev:init --filter \"@buster/database\"",
     "dev:server": "turbo run dev --filter \"@buster-app/server\"",
     "dev:server:reset": "pnpm run dev:db-init && turbo run dev --filter \"@buster-app/server\"",