Improve alignment/spacing

app/soapbox/components/status-list.tsx

@@ -139,6 +139,7 @@ const StatusList: React.FC<IStatusList> = ({
         onMoveDown={handleMoveDown}
         contextType={timelineId}
         showGroup={showGroup}
+        variant={divideType === 'border' ? 'slim' : 'rounded'}
       />
     );
   };
@@ -172,6 +173,7 @@ const StatusList: React.FC<IStatusList> = ({
         onMoveDown={handleMoveDown}
         contextType={timelineId}
         showGroup={showGroup}
+        variant={divideType === 'border' ? 'slim' : 'default'}
       />
     ));
   };
@@ -245,7 +247,7 @@ const StatusList: React.FC<IStatusList> = ({
       isLoading={isLoading}
       showLoading={isLoading && statusIds.size === 0}
       onLoadMore={handleLoadOlder}
-      placeholderComponent={PlaceholderStatus}
+      placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
       placeholderCount={20}
       ref={node}
       className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {

app/soapbox/components/status.tsx

@@ -50,7 +50,7 @@ export interface IStatus {
   featured?: boolean
   hideActionBar?: boolean
   hoverable?: boolean
-  variant?: 'default' | 'rounded'
+  variant?: 'default' | 'rounded' | 'slim'
   showGroup?: boolean
   accountAction?: React.ReactElement
 }

app/soapbox/components/ui/card/card.tsx

@@ -20,7 +20,7 @@ export type CardSizes = keyof typeof sizes
 
 interface ICard {
   /** The type of card. */
-  variant?: 'default' | 'rounded'
+  variant?: 'default' | 'rounded' | 'slim'
   /** Card size preset. */
   size?: CardSizes
   /** Extra classnames for the <div> element. */
@@ -37,6 +37,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     className={clsx({
       'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
+      'py-4': variant === 'slim',
     }, className)}
   >
     {children}

app/soapbox/features/account/components/header.tsx

@@ -105,7 +105,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   if (!account) {
     return (
-      <div className='-mx-4 -mt-4'>
+      <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div>
           <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
@@ -608,7 +608,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const menu = makeMenu();
 
   return (
-    <div className='-mx-4 -mt-4'>
+    <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
       {(account.moved && typeof account.moved === 'object') && (
         <MovedNote from={account} to={account.moved} />
       )}

app/soapbox/features/event/event-discussion.tsx

@@ -184,7 +184,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
           ref={scroller}
           hasMore={!!next}
           onLoadMore={handleLoadMore}
-          placeholderComponent={() => <PlaceholderStatus thread />}
+          placeholderComponent={() => <PlaceholderStatus variant='slim' />}
           initialTopMostItemIndex={0}
           emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
         >

app/soapbox/features/group/components/group-header.tsx

@@ -32,7 +32,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
 
   if (!group) {
     return (
-      <div className='-mx-4 -mt-4'>
+      <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
         <div>
           <div className='relative h-32 w-full bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-48' />
         </div>
@@ -105,7 +105,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
   };
 
   return (
-    <div className='-mx-4 -mt-4'>
+    <div className='-mx-4 -mt-4 sm:-mx-6 sm:-mt-6'>
       <div className='relative'>
         {renderHeader()}
 

app/soapbox/features/group/group-timeline.tsx

@@ -56,7 +56,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
   return (
     <Stack space={2}>
       {canComposeGroupStatus && (
-        <div className='border-b border-solid border-gray-200 px-2 py-4 dark:border-gray-800'>
+        <div className='border-b border-solid border-gray-200 py-6 dark:border-gray-800'>
           <HStack alignItems='start' space={4}>
             <Link to={`/@${account.acct}`}>
               <Avatar src={account.avatar} size={46} />

app/soapbox/features/placeholder/components/placeholder-status.tsx

@@ -8,15 +8,16 @@ import PlaceholderDisplayName from './placeholder-display-name';
 import PlaceholderStatusContent from './placeholder-status-content';
 
 interface IPlaceholderStatus {
-  thread?: boolean
+  variant?: 'rounded' | 'slim'
 }
 
 /** Fake status to display while data is loading. */
-const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
+const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant = 'rounded' }) => (
   <div
     className={clsx({
       'status-placeholder bg-white dark:bg-primary-900': true,
-      'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': !thread,
+      'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': variant === 'rounded',
+      'py-4': variant === 'slim',
     })}
   >
     <div className='w-full animate-pulse overflow-hidden'>

app/soapbox/features/status/components/thread-status.tsx

@@ -46,7 +46,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
         // @ts-ignore FIXME
         <StatusContainer {...props} />
       ) : (
-        <PlaceholderStatus thread />
+        <PlaceholderStatus variant='slim' />
       )}
     </div>
   );

app/soapbox/features/status/index.tsx

@@ -536,7 +536,7 @@ const Thread: React.FC<IThread> = (props) => {
               ref={scroller}
               hasMore={!!next}
               onLoadMore={handleLoadMore}
-              placeholderComponent={() => <PlaceholderStatus thread />}
+              placeholderComponent={() => <PlaceholderStatus variant='slim' />}
               initialTopMostItemIndex={ancestorsIds.size}
             >
               {children}

app/soapbox/pages/group-page.tsx

@@ -99,7 +99,7 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
   return (
     <>
       <Layout.Main>
-        <Column label={group ? group.display_name : ''} withHeader={false}>
+        <Column size='lg' label={group ? group.display_name : ''} withHeader={false}>
           <GroupHeader group={group} />
 
           <Tabs

app/soapbox/pages/profile-page.tsx

@@ -97,7 +97,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
   return (
     <>
       <Layout.Main>
-        <Column label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
+        <Column size='lg' label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
           <div className='space-y-4'>
             <Header account={account} />