From 61c137dbfa41a497fa58d54c410b48260f584f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 12 Mar 2026 14:16:40 +0100
Subject: [PATCH] nicolium: less stack/hstack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../chats/components/chat-message.tsx         | 45 +++++++----------
 .../components/chat-search/chat-search.tsx    |  9 ++--
 .../chat-search/empty-results-blankslate.tsx  |  5 +-
 .../chats/components/chat-search/results.tsx  | 10 ++--
 .../components/upload-button.tsx              | 11 +---
 .../compose-event/tabs/edit-event.tsx         | 18 +++----
 .../tabs/manage-pending-participants.tsx      | 50 +++++++++----------
 .../compose/components/reply-indicator.tsx    |  8 ++-
 .../compose/components/upload-form.tsx        |  5 +-
 .../compose/editor/nodes/image-component.tsx  |  5 +-
 .../components/crypto-address.tsx             | 14 +++---
 .../components/lightning-address.tsx          | 10 ++--
 .../crypto-donate/components/site-wallet.tsx  |  5 +-
 .../components/draft-status-action-bar.tsx    |  5 +-
 .../components/draft-status.tsx               | 10 ++--
 .../edit-profile/components/avatar-picker.tsx | 16 +++---
 .../edit-profile/components/header-picker.tsx | 17 +++----
 .../event/components/event-header.tsx         | 25 +++++-----
 18 files changed, 113 insertions(+), 155 deletions(-)

diff --git a/packages/nicolium/src/features/chats/components/chat-message.tsx b/packages/nicolium/src/features/chats/components/chat-message.tsx
index 2413265ef..1fdd91109 100644
--- a/packages/nicolium/src/features/chats/components/chat-message.tsx
+++ b/packages/nicolium/src/features/chats/components/chat-message.tsx
@@ -5,9 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from '@/components/dropdown-menu';
 import { ParsedContent } from '@/components/statuses/parsed-content';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import { MediaGallery } from '@/features/ui/util/async-components';
 import { useAppSelector } from '@/hooks/use-app-selector';
@@ -191,33 +189,26 @@ const ChatMessage: React.FC<IChatMessage> = React.memo((props) => {
         )}
       </div>
 
-      <Stack
-        space={1.5}
-        className={clsx({
-          'ml-auto': isMyMessage,
-        })}
-      >
-        <HStack
-          alignItems='center'
-          justifyContent={isMyMessage ? 'end' : 'start'}
-          className={clsx({
+      <div className={clsx('flex flex-col gap-1.5', { 'ml-auto': isMyMessage })}>
+        <div
+          className={clsx('flex items-center', {
+            'justify-end': isMyMessage,
+            'justify-start': !isMyMessage,
             'opacity-50': chatMessage.pending,
           })}
         >
-          <Stack
-            space={0.5}
+          <div
             className={clsx({
-              'max-w-[85%]': true,
+              'flex max-w-[85%] flex-col gap-0.5': true,
               'flex-1': !!chatMessage.attachment,
-              'order-3': isMyMessage,
-              'order-1': !isMyMessage,
+              'order-3 items-end': isMyMessage,
+              'order-1 items-start': !isMyMessage,
             })}
-            alignItems={isMyMessage ? 'end' : 'start'}
           >
             {maybeRenderMedia(chatMessage)}
 
             {content && (
-              <HStack alignItems='bottom' className='max-w-full'>
+              <div className='flex max-w-full items-end'>
                 <div
                   title={getFormattedTimestamp(chatMessage)}
                   className={clsx({
@@ -238,15 +229,13 @@ const ChatMessage: React.FC<IChatMessage> = React.memo((props) => {
                     <ParsedContent html={content} emojis={chatMessage.emojis} />
                   </Text>
                 </div>
-              </HStack>
+              </div>
             )}
-          </Stack>
-        </HStack>
+          </div>
+        </div>
 
-        <HStack
-          alignItems='center'
-          space={2}
-          className={clsx({
+        <div
+          className={clsx('flex items-center gap-2', {
             'ml-auto': isMyMessage,
           })}
         >
@@ -262,8 +251,8 @@ const ChatMessage: React.FC<IChatMessage> = React.memo((props) => {
               </Text>
             </span>
           </div>
-        </HStack>
-      </Stack>
+        </div>
+      </div>
     </div>
   );
 });
diff --git a/packages/nicolium/src/features/chats/components/chat-search/chat-search.tsx b/packages/nicolium/src/features/chats/components/chat-search/chat-search.tsx
index 0d981147d..3e0ea5e2c 100644
--- a/packages/nicolium/src/features/chats/components/chat-search/chat-search.tsx
+++ b/packages/nicolium/src/features/chats/components/chat-search/chat-search.tsx
@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from '@/components/ui/icon';
 import Input from '@/components/ui/input';
-import Stack from '@/components/ui/stack';
 import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useChats } from '@/queries/chats';
@@ -90,7 +89,7 @@ const ChatSearch: React.FC<IChatSearch> = ({ isMainPage = false }) => {
   };
 
   return (
-    <Stack space={4} className='-mt-1 h-full grow'>
+    <div className='-mt-1 flex h-full grow flex-col gap-4'>
       <div className='px-4 pt-1'>
         <Input
           data-testid='search'
@@ -124,10 +123,10 @@ const ChatSearch: React.FC<IChatSearch> = ({ isMainPage = false }) => {
         />
       </div>
 
-      <Stack className='grow' ref={parentRef}>
+      <div className='flex grow flex-col' ref={parentRef}>
         {renderBody()}
-      </Stack>
-    </Stack>
+      </div>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/packages/nicolium/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 95fcbcf6e..c6ceebc51 100644
--- a/packages/nicolium/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/packages/nicolium/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 
 const EmptyResultsBlankslate = () => (
-  <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
+  <div className='mx-auto flex h-full w-2/3 flex-col items-center justify-center gap-2'>
     <Text weight='bold' size='lg' align='center' data-testid='no-results'>
       <FormattedMessage
         id='chat_search.empty_results_blankslate.title'
@@ -19,7 +18,7 @@ const EmptyResultsBlankslate = () => (
         defaultMessage='Try searching for another name.'
       />
     </Text>
-  </Stack>
+  </div>
 );
 
 export { EmptyResultsBlankslate as default };
diff --git a/packages/nicolium/src/features/chats/components/chat-search/results.tsx b/packages/nicolium/src/features/chats/components/chat-search/results.tsx
index dd45bd50a..e9d1f90dc 100644
--- a/packages/nicolium/src/features/chats/components/chat-search/results.tsx
+++ b/packages/nicolium/src/features/chats/components/chat-search/results.tsx
@@ -4,8 +4,6 @@ import { Virtuoso } from 'react-virtuoso';
 
 import VerificationBadge from '@/components/accounts/verification-badge';
 import Avatar from '@/components/ui/avatar';
-import HStack from '@/components/ui/hstack';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import { useAccounts } from '@/queries/accounts/use-accounts';
 
@@ -41,7 +39,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
         }}
         data-testid='account'
       >
-        <HStack alignItems='center' space={2}>
+        <div className='flex items-center gap-2'>
           <Avatar
             src={account.avatar}
             alt={account.avatar_description}
@@ -50,7 +48,7 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
             username={account.username}
           />
 
-          <Stack alignItems='start'>
+          <div className='flex flex-col items-start'>
             <div className='flex grow items-center space-x-1'>
               <Text weight='bold' size='sm' truncate>
                 {account.display_name}
@@ -60,8 +58,8 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
             <Text size='sm' weight='medium' theme='muted' direction='ltr' truncate>
               @{account.acct}
             </Text>
-          </Stack>
-        </HStack>
+          </div>
+        </div>
       </button>
     ),
     [],
diff --git a/packages/nicolium/src/features/compose-event/components/upload-button.tsx b/packages/nicolium/src/features/compose-event/components/upload-button.tsx
index 640d0cb36..b4a43b6dd 100644
--- a/packages/nicolium/src/features/compose-event/components/upload-button.tsx
+++ b/packages/nicolium/src/features/compose-event/components/upload-button.tsx
@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from '@/components/icon';
-import HStack from '@/components/ui/hstack';
 import Text from '@/components/ui/text';
 import { useAppSelector } from '@/hooks/use-app-selector';
 
@@ -32,13 +31,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   };
 
   return (
-    <HStack
-      className='size-full cursor-pointer text-primary-500 dark:text-primary-400'
-      space={3}
-      alignItems='center'
-      justifyContent='center'
-      element='label'
-    >
+    <label className='flex size-full cursor-pointer items-center justify-center gap-3 text-primary-500 dark:text-primary-400'>
       <Icon
         src={require('@phosphor-icons/core/regular/upload.svg')}
         className='size-7'
@@ -56,7 +49,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
         disabled={disabled}
         className='hidden'
       />
-    </HStack>
+    </label>
   );
 };
 
diff --git a/packages/nicolium/src/features/compose-event/tabs/edit-event.tsx b/packages/nicolium/src/features/compose-event/tabs/edit-event.tsx
index 549ade0c1..f39cd874c 100644
--- a/packages/nicolium/src/features/compose-event/tabs/edit-event.tsx
+++ b/packages/nicolium/src/features/compose-event/tabs/edit-event.tsx
@@ -12,11 +12,9 @@ import Button from '@/components/ui/button';
 import Form from '@/components/ui/form';
 import FormActions from '@/components/ui/form-actions';
 import FormGroup from '@/components/ui/form-group';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import IconButton from '@/components/ui/icon-button';
 import Input from '@/components/ui/input';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import Toggle from '@/components/ui/toggle';
 import ContentTypeButton from '@/features/compose/components/content-type-button';
@@ -225,18 +223,18 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
 
   const renderLocation = () =>
     location && (
-      <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
+      <div className='flex h-[38px] items-center gap-2 text-gray-700 dark:text-gray-500'>
         <Icon
           src={ADDRESS_ICONS[location.type] || require('@phosphor-icons/core/regular/map-pin.svg')}
         />
-        <Stack className='grow'>
+        <div className='flex grow flex-col'>
           <Text>{location.description}</Text>
           <Text theme='muted' size='xs'>
             {[location.street, location.locality, location.country]
               .filter((val) => val?.trim())
               .join(' · ')}
           </Text>
-        </Stack>
+        </div>
         <IconButton
           title={intl.formatMessage(messages.resetLocation)}
           src={require('@phosphor-icons/core/regular/x.svg')}
@@ -244,7 +242,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
             onChangeLocation(null);
           }}
         />
-      </HStack>
+      </div>
     );
 
   return (
@@ -350,7 +348,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
           onChange={onChangeStartTime}
         />
       </FormGroup>
-      <HStack alignItems='center' space={2}>
+      <div className='flex items-center gap-2'>
         <Toggle checked={!!endTime} onChange={onChangeHasEndTime} id='has-end-time-toggle' />
         <Text htmlFor='has-end-time-toggle' tag='label' theme='muted'>
           <FormattedMessage
@@ -358,7 +356,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
             defaultMessage='This event has an end date'
           />
         </Text>
-      </HStack>
+      </div>
       {endTime && (
         <FormGroup
           labelText={
@@ -381,7 +379,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
         </FormGroup>
       )}
       {!statusId && (
-        <HStack alignItems='center' space={2}>
+        <div className='flex items-center gap-2'>
           <Toggle
             checked={approvalRequired}
             onChange={onChangeApprovalRequired}
@@ -393,7 +391,7 @@ const EditEvent: React.FC<IEditEvent> = ({ statusId }) => {
               defaultMessage='I want to approve participation requests manually'
             />
           </Text>
-        </HStack>
+        </div>
       )}
       <FormActions>
         <Button disabled={isDisabled} theme='primary' type='submit'>
diff --git a/packages/nicolium/src/features/compose-event/tabs/manage-pending-participants.tsx b/packages/nicolium/src/features/compose-event/tabs/manage-pending-participants.tsx
index da02fa794..091a924d5 100644
--- a/packages/nicolium/src/features/compose-event/tabs/manage-pending-participants.tsx
+++ b/packages/nicolium/src/features/compose-event/tabs/manage-pending-participants.tsx
@@ -3,9 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import ScrollableList from '@/components/scrollable-list';
 import Button from '@/components/ui/button';
-import HStack from '@/components/ui/hstack';
 import Spinner from '@/components/ui/spinner';
-import Stack from '@/components/ui/stack';
 import AccountContainer from '@/containers/account-container';
 import {
   useAcceptEventParticipationRequestMutation,
@@ -58,7 +56,7 @@ const Account: React.FC<IAccount> = ({ eventId, id, participationMessage }) => {
       id={id}
       note={participationMessage ?? undefined}
       action={
-        <HStack space={2}>
+        <div className='flex gap-2'>
           <Button
             theme='secondary'
             size='sm'
@@ -89,7 +87,7 @@ const Account: React.FC<IAccount> = ({ eventId, id, participationMessage }) => {
               });
             }}
           />
-        </HStack>
+        </div>
       }
     />
   );
@@ -108,29 +106,27 @@ const ManagePendingParticipants: React.FC<IManagePendingParticipants> = ({ statu
   } = useEventParticipationRequests(statusId);
 
   return accounts ? (
-    <Stack space={3}>
-      <ScrollableList
-        scrollKey={`eventPendingParticipants:${statusId}`}
-        emptyMessageText={
-          <FormattedMessage
-            id='empty_column.event_participant_requests'
-            defaultMessage='There are no pending event participation requests.'
-          />
-        }
-        hasMore={hasNextPage}
-        isLoading={isLoading}
-        onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
-      >
-        {accounts.map(({ account_id, participation_message }) => (
-          <Account
-            key={account_id}
-            eventId={statusId}
-            id={account_id}
-            participationMessage={participation_message}
-          />
-        ))}
-      </ScrollableList>
-    </Stack>
+    <ScrollableList
+      scrollKey={`eventPendingParticipants:${statusId}`}
+      emptyMessageText={
+        <FormattedMessage
+          id='empty_column.event_participant_requests'
+          defaultMessage='There are no pending event participation requests.'
+        />
+      }
+      hasMore={hasNextPage}
+      isLoading={isLoading}
+      onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
+    >
+      {accounts.map(({ account_id, participation_message }) => (
+        <Account
+          key={account_id}
+          eventId={statusId}
+          id={account_id}
+          participationMessage={participation_message}
+        />
+      ))}
+    </ScrollableList>
   ) : (
     <Spinner />
   );
diff --git a/packages/nicolium/src/features/compose/components/reply-indicator.tsx b/packages/nicolium/src/features/compose/components/reply-indicator.tsx
index af66bf5ac..cbcefb6fc 100644
--- a/packages/nicolium/src/features/compose/components/reply-indicator.tsx
+++ b/packages/nicolium/src/features/compose/components/reply-indicator.tsx
@@ -5,7 +5,6 @@ import Markup from '@/components/markup';
 import AttachmentThumbs from '@/components/media/attachment-thumbs';
 import { ParsedContent } from '@/components/statuses/parsed-content';
 import QuotedStatusIndicator from '@/components/statuses/quoted-status-indicator';
-import Stack from '@/components/ui/stack';
 import AccountContainer from '@/containers/account-container';
 import { getTextDirection } from '@/utils/rtl';
 
@@ -57,10 +56,9 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({
   }
 
   return (
-    <Stack
-      space={2}
+    <div
       className={clsx(
-        'max-h-72 overflow-y-auto rounded-lg bg-gray-100 p-4 black:bg-gray-900 dark:bg-gray-800',
+        'flex max-h-72 flex-col gap-2 overflow-y-auto rounded-lg bg-gray-100 p-4 black:bg-gray-900 dark:bg-gray-800',
         className,
       )}
     >
@@ -92,7 +90,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({
       {status.quote_id && (
         <QuotedStatusIndicator statusId={status.quote_id} statusUrl={status.quote_url} />
       )}
-    </Stack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/compose/components/upload-form.tsx b/packages/nicolium/src/features/compose/components/upload-form.tsx
index c4608237e..5420ddad6 100644
--- a/packages/nicolium/src/features/compose/components/upload-form.tsx
+++ b/packages/nicolium/src/features/compose/components/upload-form.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback, useRef } from 'react';
 
-import HStack from '@/components/ui/hstack';
 import { useCompose, useComposeActions } from '@/stores/compose';
 
 import Upload from './upload';
@@ -53,7 +52,7 @@ const UploadForm: React.FC<IUploadForm> = ({ composeId, onSubmit }) => {
     <div className='overflow-hidden'>
       <UploadProgress composeId={composeId} />
 
-      <HStack wrap className={clsx('overflow-hidden', mediaIds.length > 0 && 'm-[-5px]')}>
+      <div className={clsx('flex flex-wrap overflow-hidden', mediaIds.length > 0 && 'm-[-5px]')}>
         {mediaIds.map((id: string) => (
           <Upload
             id={id}
@@ -65,7 +64,7 @@ const UploadForm: React.FC<IUploadForm> = ({ composeId, onSubmit }) => {
             onDragEnd={handleDragEnd}
           />
         ))}
-      </HStack>
+      </div>
     </div>
   );
 };
diff --git a/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx b/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
index 10c4425b7..9e42f516d 100644
--- a/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
+++ b/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
@@ -28,7 +28,6 @@ import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import * as v from 'valibot';
 
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import IconButton from '@/components/ui/icon-button';
 import { useModalsActions } from '@/stores/modals';
@@ -297,7 +296,7 @@ const ImageComponent = ({
         onClick={handleClick}
         role='button'
       >
-        <HStack className='absolute right-2 top-2 z-10' space={2}>
+        <div className='absolute right-2 top-2 z-10 flex gap-2'>
           <IconButton
             onClick={previewImage}
             src={require('@phosphor-icons/core/regular/magnifying-glass-plus.svg')}
@@ -314,7 +313,7 @@ const ImageComponent = ({
             iconClassName='h-5 w-5'
             title={intl.formatMessage(messages.delete)}
           />
-        </HStack>
+        </div>
 
         <div
           className={clsx(
diff --git a/packages/nicolium/src/features/crypto-donate/components/crypto-address.tsx b/packages/nicolium/src/features/crypto-donate/components/crypto-address.tsx
index e0817fe62..7e2d22db0 100644
--- a/packages/nicolium/src/features/crypto-donate/components/crypto-address.tsx
+++ b/packages/nicolium/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import CopyableInput from '@/components/copyable-input';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import { useModalsActions } from '@/stores/modals';
 
@@ -30,8 +28,8 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): React.JSX.Element => {
   const title = getTitle(ticker);
 
   return (
-    <Stack>
-      <HStack alignItems='center' className='mb-1'>
+    <div className='flex flex-col'>
+      <div className='mb-1 flex items-center'>
         <CryptoIcon
           className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
           ticker={ticker}
@@ -40,17 +38,17 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): React.JSX.Element => {
 
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
-        <HStack alignItems='center' className='ml-auto'>
+        <div className='ml-auto flex items-center'>
           <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
             <Icon src={require('@phosphor-icons/core/regular/qr-code.svg')} size={20} />
           </a>
-        </HStack>
-      </HStack>
+        </div>
+      </div>
 
       {note && <Text>{note}</Text>}
 
       <CopyableInput value={address} />
-    </Stack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/crypto-donate/components/lightning-address.tsx b/packages/nicolium/src/features/crypto-donate/components/lightning-address.tsx
index 9ff1abe58..93d0d818f 100644
--- a/packages/nicolium/src/features/crypto-donate/components/lightning-address.tsx
+++ b/packages/nicolium/src/features/crypto-donate/components/lightning-address.tsx
@@ -3,8 +3,6 @@ import { FormattedMessage } from 'react-intl';
 
 import CopyableInput from '@/components/copyable-input';
 import Emoji from '@/components/ui/emoji';
-import HStack from '@/components/ui/hstack';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 
 interface ILightningAddress {
@@ -15,8 +13,8 @@ const LightningAddress: React.FC<ILightningAddress> = (props): React.JSX.Element
   const { address } = props;
 
   return (
-    <Stack>
-      <HStack alignItems='center' className='mb-1'>
+    <div className='flex flex-col'>
+      <div className='mb-1 flex items-center'>
         <Emoji
           className='mr-2.5 flex w-6 items-start justify-center rtl:ml-2.5 rtl:mr-0'
           emoji='⚡'
@@ -25,10 +23,10 @@ const LightningAddress: React.FC<ILightningAddress> = (props): React.JSX.Element
         <Text weight='bold'>
           <FormattedMessage id='crypto.lightning' defaultMessage='Lightning' />
         </Text>
-      </HStack>
+      </div>
 
       <CopyableInput value={address} />
-    </Stack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/crypto-donate/components/site-wallet.tsx b/packages/nicolium/src/features/crypto-donate/components/site-wallet.tsx
index 75e9f7800..1d44549d5 100644
--- a/packages/nicolium/src/features/crypto-donate/components/site-wallet.tsx
+++ b/packages/nicolium/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import Stack from '@/components/ui/stack';
 import { useFrontendConfig } from '@/hooks/use-frontend-config';
 
 import CryptoAddress from './crypto-address';
@@ -14,7 +13,7 @@ const SiteWallet: React.FC<ISiteWallet> = ({ limit }): React.JSX.Element => {
   const addresses = typeof limit === 'number' ? cryptoAddresses.slice(0, limit) : cryptoAddresses;
 
   return (
-    <Stack space={4}>
+    <div className='flex flex-col gap-4'>
       {addresses.map((address) => (
         <CryptoAddress
           key={address.ticker}
@@ -23,7 +22,7 @@ const SiteWallet: React.FC<ISiteWallet> = ({ limit }): React.JSX.Element => {
           note={address.note}
         />
       ))}
-    </Stack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/draft-statuses/components/draft-status-action-bar.tsx b/packages/nicolium/src/features/draft-statuses/components/draft-status-action-bar.tsx
index 5239cc228..7c93abb96 100644
--- a/packages/nicolium/src/features/draft-statuses/components/draft-status-action-bar.tsx
+++ b/packages/nicolium/src/features/draft-statuses/components/draft-status-action-bar.tsx
@@ -3,7 +3,6 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchStatus } from '@/actions/statuses';
 import Button from '@/components/ui/button';
-import HStack from '@/components/ui/hstack';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
 import { queryClient } from '@/queries/client';
 import { queryKeys } from '@/queries/keys';
@@ -65,14 +64,14 @@ const DraftStatusActionBar: React.FC<IDraftStatusActionBar> = ({ source, status
   };
 
   return (
-    <HStack space={2} justifyContent='end'>
+    <div className='flex justify-end gap-2'>
       <Button theme='primary' size='sm' onClick={handleEditClick}>
         <FormattedMessage id='draft_status.edit' defaultMessage='Edit' />
       </Button>
       <Button theme='danger' size='sm' onClick={handleCancelClick}>
         <FormattedMessage id='draft_status.cancel' defaultMessage='Delete' />
       </Button>
-    </HStack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/features/draft-statuses/components/draft-status.tsx b/packages/nicolium/src/features/draft-statuses/components/draft-status.tsx
index ec5ee1cf0..635c6f726 100644
--- a/packages/nicolium/src/features/draft-statuses/components/draft-status.tsx
+++ b/packages/nicolium/src/features/draft-statuses/components/draft-status.tsx
@@ -7,8 +7,6 @@ import AttachmentThumbs from '@/components/media/attachment-thumbs';
 import OutlineBox from '@/components/outline-box';
 import StatusContent from '@/components/statuses/status-content';
 import StatusReplyMentions from '@/components/statuses/status-reply-mentions';
-import HStack from '@/components/ui/hstack';
-import Stack from '@/components/ui/stack';
 import QuotedStatus from '@/features/status/containers/quoted-status-container';
 import PollPreview from '@/features/ui/components/poll-preview';
 import { useOwnAccount } from '@/hooks/use-own-account';
@@ -65,18 +63,18 @@ const DraftStatus: React.FC<IDraftStatus> = ({ draftStatus, ...other }) => {
         data-id={status.id}
       >
         <div className='mb-4'>
-          <HStack justifyContent='between' alignItems='start'>
+          <div className='flex items-start justify-between'>
             <Account
               key={account.id}
               account={account}
               action={<DraftStatusActionBar source={draftStatus} status={status} {...other} />}
             />
-          </HStack>
+          </div>
         </div>
 
         <StatusReplyMentions status={status} />
 
-        <Stack space={4}>
+        <div className='flex flex-col gap-4'>
           <StatusContent status={status} collapsable />
 
           {status.media_attachments.length > 0 && <AttachmentThumbs status={status} />}
@@ -84,7 +82,7 @@ const DraftStatus: React.FC<IDraftStatus> = ({ draftStatus, ...other }) => {
           {quote}
 
           {poll && <PollPreview poll={poll} />}
-        </Stack>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/nicolium/src/features/edit-profile/components/avatar-picker.tsx b/packages/nicolium/src/features/edit-profile/components/avatar-picker.tsx
index 4fdff1261..6a7bae157 100644
--- a/packages/nicolium/src/features/edit-profile/components/avatar-picker.tsx
+++ b/packages/nicolium/src/features/edit-profile/components/avatar-picker.tsx
@@ -4,7 +4,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import AltIndicator from '@/components/media/alt-indicator';
 import Avatar from '@/components/ui/avatar';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import { useDraggedFiles } from '@/hooks/use-dragged-files';
 import { useModalsActions } from '@/stores/modals';
@@ -73,18 +72,19 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(
         {src && (
           <Avatar className={clsx(onChangeDescription && '!rounded-lg')} src={src} size={80} />
         )}
-        <HStack
-          alignItems='center'
-          justifyContent='center'
-          className={clsx('absolute left-0 top-0 size-full rounded-lg transition-opacity', {
-            'bg-primary-500 opacity-0 hover:opacity-90': src,
-          })}
+        <div
+          className={clsx(
+            'absolute left-0 top-0 flex size-full items-center justify-center rounded-lg transition-opacity',
+            {
+              'bg-primary-500 opacity-0 hover:opacity-90': src,
+            },
+          )}
         >
           <Icon
             src={require('@phosphor-icons/core/regular/camera-plus.svg')}
             className='size-5 text-white'
           />
-        </HStack>
+        </div>
         <span className='sr-only'>
           <FormattedMessage id='group.upload_avatar' defaultMessage='Upload avatar' />
         </span>
diff --git a/packages/nicolium/src/features/edit-profile/components/header-picker.tsx b/packages/nicolium/src/features/edit-profile/components/header-picker.tsx
index ce45838ec..78dee1cc7 100644
--- a/packages/nicolium/src/features/edit-profile/components/header-picker.tsx
+++ b/packages/nicolium/src/features/edit-profile/components/header-picker.tsx
@@ -3,7 +3,6 @@ import React, { useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import AltIndicator from '@/components/media/alt-indicator';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
@@ -89,13 +88,13 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(
             alt={intl.formatMessage(messages.title)}
           />
         )}
-        <HStack
-          className={clsx('absolute top-0 size-full transition-opacity', {
-            'bg-primary-100 opacity-0 hover:opacity-90 dark:bg-gray-800': src,
-          })}
-          space={1.5}
-          alignItems='center'
-          justifyContent='center'
+        <div
+          className={clsx(
+            'absolute top-0 flex size-full items-center justify-center gap-1.5 transition-opacity',
+            {
+              'bg-primary-100 opacity-0 hover:opacity-90 dark:bg-gray-800': src,
+            },
+          )}
         >
           <Icon src={require('@phosphor-icons/core/regular/upload.svg')} className='size-4.5' />
 
@@ -114,7 +113,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(
             disabled={disabled}
             className='hidden'
           />
-        </HStack>
+        </div>
         {onClear && src && (
           <IconButton
             onClick={handleClear}
diff --git a/packages/nicolium/src/features/event/components/event-header.tsx b/packages/nicolium/src/features/event/components/event-header.tsx
index b52bdf397..6d5399c3f 100644
--- a/packages/nicolium/src/features/event/components/event-header.tsx
+++ b/packages/nicolium/src/features/event/components/event-header.tsx
@@ -12,7 +12,6 @@ import StillImage from '@/components/still-image';
 import Button from '@/components/ui/button';
 import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import Emojify from '@/features/emoji/emojify';
 import { useAppDispatch } from '@/hooks/use-app-dispatch';
@@ -468,8 +467,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           )}
         </div>
       </div>
-      <Stack space={2}>
-        <HStack className='w-full' alignItems='start' space={2}>
+      <div className='flex flex-col gap-2'>
+        <div className='flex w-full items-start gap-2'>
           <Text className='grow' size='lg' weight='bold'>
             {event.name}
           </Text>
@@ -495,10 +494,10 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           ) : (
             <EventActionButton status={status} />
           )}
-        </HStack>
+        </div>
 
-        <Stack space={1}>
-          <HStack alignItems='center' space={2}>
+        <div className='flex flex-col gap-1'>
+          <div className='flex items-center gap-2'>
             <Icon src={require('@phosphor-icons/core/regular/flag-banner.svg')} />
             <span>
               <FormattedMessage
@@ -522,10 +521,10 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                 }}
               />
             </span>
-          </HStack>
+          </div>
 
           {(event.join_mode !== 'external' || event.participants_count > 0) && (
-            <HStack alignItems='center' space={2}>
+            <div className='flex items-center gap-2'>
               <Icon src={require('@phosphor-icons/core/regular/users.svg')} />
               <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
                 <span>
@@ -539,19 +538,19 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                   />
                 </span>
               </a>
-            </HStack>
+            </div>
           )}
 
           <EventDate status={status} />
 
           {event.location && (
-            <HStack alignItems='center' space={2}>
+            <div className='flex items-center gap-2'>
               <Icon src={require('@phosphor-icons/core/regular/map-pin.svg')} />
               <span>{event.location.name}</span>
-            </HStack>
+            </div>
           )}
-        </Stack>
-      </Stack>
+        </div>
+      </div>
     </>
   );
 };