nicolium: less stack/hstack

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
2026-03-12 14:16:40 +01:00
parent f557e55108
commit 61c137dbfa
18 changed files with 113 additions and 155 deletions
--- 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>
  );
 });
--- 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>
  );
 };

--- 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 };
--- 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>
    ),
    [],
--- 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>
  );
 };

--- 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'>
--- 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 />
  );
--- 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>
  );
 };

--- 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>
  );
 };
--- 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(
--- 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>
  );
 };

--- 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>
  );
 };

--- 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>
  );
 };

--- 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>
  );
 };

--- 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>
  );
--- 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>
--- 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}
--- 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>
    </>
  );
 };