From dfa010f7ee15297a85086fadd1da5fcde22c12b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 9 Mar 2026 22:14:52 +0100
Subject: [PATCH] nicolium: limit usage of hstack/stack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../nicolium/src/components/accounts/avatar-stack.tsx    | 5 ++---
 packages/nicolium/src/components/accounts/scrobble.tsx   | 5 ++---
 .../nicolium/src/components/authorize-reject-buttons.tsx | 5 ++---
 .../nicolium/src/components/statuses/hashtags-bar.tsx    | 5 ++---
 packages/nicolium/src/pages/dashboard/reports.tsx        | 9 ++-------
 packages/nicolium/src/pages/dashboard/rules.tsx          | 5 ++---
 .../src/pages/developers/service-worker-info.tsx         | 5 ++---
 packages/nicolium/src/pages/fun/circle.tsx               | 4 ++--
 packages/nicolium/src/pages/search/search.tsx            | 9 ++-------
 packages/nicolium/src/pages/settings/backups.tsx         | 5 ++---
 packages/nicolium/src/pages/settings/edit-filter.tsx     | 9 ++++-----
 packages/nicolium/src/pages/settings/edit-profile.tsx    | 5 ++---
 packages/nicolium/src/pages/status-lists/events.tsx      | 5 ++---
 .../src/pages/status-lists/interaction-requests.tsx      | 9 ++++-----
 .../nicolium/src/pages/timelines/landing-timeline.tsx    | 5 ++---
 .../nicolium/src/pages/timelines/remote-timeline.tsx     | 5 ++---
 packages/nicolium/src/pages/utils/landing.tsx            | 5 ++---
 17 files changed, 38 insertions(+), 62 deletions(-)

diff --git a/packages/nicolium/src/components/accounts/avatar-stack.tsx b/packages/nicolium/src/components/accounts/avatar-stack.tsx
index a94cd9e4b..c76de3891 100644
--- a/packages/nicolium/src/components/accounts/avatar-stack.tsx
+++ b/packages/nicolium/src/components/accounts/avatar-stack.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React from 'react';
 
 import Avatar from '@/components/ui/avatar';
-import HStack from '@/components/ui/hstack';
 import { useAccounts } from '@/queries/accounts/use-accounts';
 
 interface IAvatarStack {
@@ -14,7 +13,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
   const { data: accounts } = useAccounts(accountIds.slice(0, limit));
 
   return (
-    <HStack className='relative' aria-hidden>
+    <div className='relative flex' aria-hidden>
       {accounts.map((account, i) => (
         <div
           className={clsx('relative', { '-ml-3': i !== 0 })}
@@ -31,7 +30,7 @@ const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
           />
         </div>
       ))}
-    </HStack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/components/accounts/scrobble.tsx b/packages/nicolium/src/components/accounts/scrobble.tsx
index 18c923aa6..8809ceb68 100644
--- a/packages/nicolium/src/components/accounts/scrobble.tsx
+++ b/packages/nicolium/src/components/accounts/scrobble.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Text from '@/components/ui/text';
 
@@ -41,7 +40,7 @@ const Scrobble: React.FC<IScrobble> = ({ scrobble }) => {
   if (!isRecent) return null;
 
   return (
-    <HStack alignItems='center' space={0.5}>
+    <div className='flex items-center gap-0.5'>
       <Icon
         src={require('@phosphor-icons/core/regular/music-notes-simple.svg')}
         className='size-4 text-gray-800 dark:text-gray-200'
@@ -78,7 +77,7 @@ const Scrobble: React.FC<IScrobble> = ({ scrobble }) => {
           />
         </Text>
       </div>
-    </HStack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/components/authorize-reject-buttons.tsx b/packages/nicolium/src/components/authorize-reject-buttons.tsx
index a65770f54..f39a5beec 100644
--- a/packages/nicolium/src/components/authorize-reject-buttons.tsx
+++ b/packages/nicolium/src/components/authorize-reject-buttons.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 
@@ -127,7 +126,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
       );
     default:
       return (
-        <HStack space={3} alignItems='center'>
+        <div className='flex items-center gap-3'>
           <AuthorizeRejectButton
             theme='danger'
             icon={require('@phosphor-icons/core/regular/x.svg')}
@@ -146,7 +145,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({
             style={renderStyle('authorizing')}
             title={intl.formatMessage(messages.authorize)}
           />
-        </HStack>
+        </div>
       );
   }
 };
diff --git a/packages/nicolium/src/components/statuses/hashtags-bar.tsx b/packages/nicolium/src/components/statuses/hashtags-bar.tsx
index 0ba1b6fa8..eda31c858 100644
--- a/packages/nicolium/src/components/statuses/hashtags-bar.tsx
+++ b/packages/nicolium/src/components/statuses/hashtags-bar.tsx
@@ -3,7 +3,6 @@ import { Link } from '@tanstack/react-router';
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import HStack from '../ui/hstack';
 import Text from '../ui/text';
 
 // Fit on a single line on desktop
@@ -28,7 +27,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
   const revealedHashtags = expanded ? hashtags : hashtags.slice(0, VISIBLE_HASHTAGS);
 
   return (
-    <HStack space={2} wrap>
+    <div className='flex flex-wrap gap-2'>
       {revealedHashtags.map((hashtag) => (
         <Link
           key={hashtag}
@@ -56,7 +55,7 @@ const HashtagsBar: React.FC<IHashtagsBar> = ({ hashtags }) => {
           </Text>
         </button>
       )}
-    </HStack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/pages/dashboard/reports.tsx b/packages/nicolium/src/pages/dashboard/reports.tsx
index 0cac8f8d2..9ad4db841 100644
--- a/packages/nicolium/src/pages/dashboard/reports.tsx
+++ b/packages/nicolium/src/pages/dashboard/reports.tsx
@@ -4,7 +4,6 @@ import { defineMessages, FormattedList, FormattedMessage, useIntl } from 'react-
 
 import ScrollableList from '@/components/scrollable-list';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 import Report from '@/features/admin/components/report';
@@ -46,11 +45,7 @@ const Reports: React.FC = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       {(accountId ?? targetAccountId) && (
-        <HStack
-          className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'
-          alignItems='center'
-          space={2}
-        >
+        <div className='flex items-center gap-2 border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'>
           <IconButton
             iconClassName='h-5 w-5'
             src={require('@phosphor-icons/core/regular/x.svg')}
@@ -91,7 +86,7 @@ const Reports: React.FC = () => {
               }}
             />
           </Text>
-        </HStack>
+        </div>
       )}
       <ScrollableList
         scrollKey='adminReports'
diff --git a/packages/nicolium/src/pages/dashboard/rules.tsx b/packages/nicolium/src/pages/dashboard/rules.tsx
index 6470fcb4f..692b5c70c 100644
--- a/packages/nicolium/src/pages/dashboard/rules.tsx
+++ b/packages/nicolium/src/pages/dashboard/rules.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import ScrollableList from '@/components/scrollable-list';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import { useRules } from '@/queries/admin/use-rules';
@@ -67,14 +66,14 @@ const Rule: React.FC<IRule> = ({ rule }) => {
             {rule.priority}
           </Text>
         )}
-        <HStack justifyContent='end' space={2}>
+        <div className='flex justify-end gap-2'>
           <Button theme='primary' onClick={handleEditRule(rule)}>
             <FormattedMessage id='admin.rules.edit' defaultMessage='Edit' />
           </Button>
           <Button theme='primary' onClick={handleDeleteRule(rule.id)}>
             <FormattedMessage id='admin.rules.delete' defaultMessage='Delete' />
           </Button>
-        </HStack>
+        </div>
       </Stack>
     </div>
   );
diff --git a/packages/nicolium/src/pages/developers/service-worker-info.tsx b/packages/nicolium/src/pages/developers/service-worker-info.tsx
index 72e5e11bc..878440a4d 100644
--- a/packages/nicolium/src/pages/developers/service-worker-info.tsx
+++ b/packages/nicolium/src/pages/developers/service-worker-info.tsx
@@ -5,7 +5,6 @@ import List, { ListItem } from '@/components/list';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
 import FormActions from '@/components/ui/form-actions';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import Indicator from '@/components/ui/indicator';
 import Stack from '@/components/ui/stack';
@@ -88,12 +87,12 @@ const ServiceWorkerInfo: React.FC = () => {
       <Stack space={4}>
         <List>
           <ListItem label={intl.formatMessage(messages.status)}>
-            <HStack alignItems='center' space={2}>
+            <div className='flex items-center gap-2'>
               <Indicator state={getState()} />
               <Text size='md' theme='muted'>
                 {getMessage()}
               </Text>
-            </HStack>
+            </div>
           </ListItem>
 
           {url && (
diff --git a/packages/nicolium/src/pages/fun/circle.tsx b/packages/nicolium/src/pages/fun/circle.tsx
index fc3b2f23a..20f5ce08d 100644
--- a/packages/nicolium/src/pages/fun/circle.tsx
+++ b/packages/nicolium/src/pages/fun/circle.tsx
@@ -249,7 +249,7 @@ const CirclePage: React.FC = () => {
             <Stack space={2}>
               {users?.map((user) => (
                 <Link key={user.id} to='/@{$username}' params={{ username: user.acct }}>
-                  <HStack space={2} alignItems='center'>
+                  <div className='flex items-center gap-2'>
                     <Avatar
                       size={20}
                       src={user.avatar!}
@@ -259,7 +259,7 @@ const CirclePage: React.FC = () => {
                     <Text size='sm' weight='semibold' truncate>
                       {user.acct}
                     </Text>
-                  </HStack>
+                  </div>
                 </Link>
               ))}
             </Stack>
diff --git a/packages/nicolium/src/pages/search/search.tsx b/packages/nicolium/src/pages/search/search.tsx
index c4b84171a..21fb3c2f2 100644
--- a/packages/nicolium/src/pages/search/search.tsx
+++ b/packages/nicolium/src/pages/search/search.tsx
@@ -6,7 +6,6 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import SearchColumn from '@/columns/search';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Input from '@/components/ui/input';
 import SvgIcon from '@/components/ui/svg-icon';
@@ -193,11 +192,7 @@ const SearchResults = () => {
   return (
     <>
       {accountId ? (
-        <HStack
-          className='border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'
-          alignItems='center'
-          space={2}
-        >
+        <div className='flex items-center gap-2 border-b border-solid border-gray-200 p-2 pb-4 dark:border-gray-800'>
           <IconButton
             className='text-gray-400 hover:text-gray-600'
             iconClassName='h-5 w-5'
@@ -212,7 +207,7 @@ const SearchResults = () => {
               values={{ acct: <strong className='break-words'>{account?.acct}</strong> }}
             />
           </Text>
-        </HStack>
+        </div>
       ) : (
         renderFilterBar()
       )}
diff --git a/packages/nicolium/src/pages/settings/backups.tsx b/packages/nicolium/src/pages/settings/backups.tsx
index bb87f7937..9de4bbfa7 100644
--- a/packages/nicolium/src/pages/settings/backups.tsx
+++ b/packages/nicolium/src/pages/settings/backups.tsx
@@ -5,7 +5,6 @@ import Button from '@/components/ui/button';
 import Card from '@/components/ui/card';
 import Column from '@/components/ui/column';
 import FormActions from '@/components/ui/form-actions';
-import HStack from '@/components/ui/hstack';
 import Spinner from '@/components/ui/spinner';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
@@ -51,7 +50,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
             />
           </Text>
         </Stack>
-        <HStack justifyContent='end'>
+        <div className='flex justify-end'>
           {backup.processed ? (
             <a href={backup.url} target='_blank'>
               {button}
@@ -59,7 +58,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
           ) : (
             button
           )}
-        </HStack>
+        </div>
       </Stack>
     </div>
   );
diff --git a/packages/nicolium/src/pages/settings/edit-filter.tsx b/packages/nicolium/src/pages/settings/edit-filter.tsx
index 0428f8c8d..01b1d802f 100644
--- a/packages/nicolium/src/pages/settings/edit-filter.tsx
+++ b/packages/nicolium/src/pages/settings/edit-filter.tsx
@@ -9,7 +9,6 @@ import Column from '@/components/ui/column';
 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 Input from '@/components/ui/input';
 import Select from '@/components/ui/select';
 import Stack from '@/components/ui/stack';
@@ -64,7 +63,7 @@ const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) =>
     };
 
   return (
-    <HStack space={2} grow>
+    <div className='flex flex-grow gap-2'>
       <Input
         type='text'
         outerClassName='w-2/5 grow'
@@ -72,14 +71,14 @@ const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) =>
         onChange={handleChange('keyword')}
         placeholder={intl.formatMessage(messages.keyword)}
       />
-      <HStack alignItems='center' space={2}>
+      <div className='flex items-center gap-2'>
         <Toggle checked={value.whole_word} onChange={handleChange('whole_word')} />
 
         <Text tag='span' theme='muted'>
           <FormattedMessage id='column.filters.whole_word' defaultMessage='Whole word' />
         </Text>
-      </HStack>
-    </HStack>
+      </div>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/pages/settings/edit-profile.tsx b/packages/nicolium/src/pages/settings/edit-profile.tsx
index fc87f79f1..9fdaa3675 100644
--- a/packages/nicolium/src/pages/settings/edit-profile.tsx
+++ b/packages/nicolium/src/pages/settings/edit-profile.tsx
@@ -12,7 +12,6 @@ import Column from '@/components/ui/column';
 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 Input from '@/components/ui/input';
 import Streamfield from '@/components/ui/streamfield';
 import Textarea from '@/components/ui/textarea';
@@ -230,7 +229,7 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({
     };
 
   return (
-    <HStack space={2} grow>
+    <div className='flex flex-grow gap-2'>
       <Input
         type='text'
         outerClassName='w-2/5 grow'
@@ -265,7 +264,7 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({
           if (field) field.draggable = true;
         }}
       />
-    </HStack>
+    </div>
   );
 };
 
diff --git a/packages/nicolium/src/pages/status-lists/events.tsx b/packages/nicolium/src/pages/status-lists/events.tsx
index 4902a5842..ba20a5d65 100644
--- a/packages/nicolium/src/pages/status-lists/events.tsx
+++ b/packages/nicolium/src/pages/status-lists/events.tsx
@@ -7,7 +7,6 @@ import EventPreview from '@/components/statuses/event-preview';
 import Button from '@/components/ui/button';
 import Card, { CardBody, CardHeader, CardTitle } from '@/components/ui/card';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Icon from '@/components/ui/icon';
 import PlaceholderEventPreview from '@/features/placeholder/components/placeholder-event-preview';
 import { useStatus } from '@/queries/statuses/use-status';
@@ -109,14 +108,14 @@ const EventsPage = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <HStack className='mb-2' space={2} justifyContent='between'>
+      <div className='mb-2 flex justify-between gap-2'>
         <CardTitle
           title={<FormattedMessage id='events.recent_events' defaultMessage='Recent events' />}
         />
         <Button className='ml-auto xl:hidden' theme='primary' size='sm' to='/events/new'>
           <FormattedMessage id='events.create_event' defaultMessage='Create event' />
         </Button>
-      </HStack>
+      </div>
       <CardBody className='mb-2'>
         <EventCarousel
           statusIds={recentEvents}
diff --git a/packages/nicolium/src/pages/status-lists/interaction-requests.tsx b/packages/nicolium/src/pages/status-lists/interaction-requests.tsx
index a991a0b6e..b37c9f04f 100644
--- a/packages/nicolium/src/pages/status-lists/interaction-requests.tsx
+++ b/packages/nicolium/src/pages/status-lists/interaction-requests.tsx
@@ -11,7 +11,6 @@ import ScrollableList from '@/components/scrollable-list';
 import StatusContent from '@/components/statuses/status-content';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import AccountContainer from '@/containers/account-container';
@@ -188,7 +187,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
   });
 
   const actions = (
-    <HStack space={2}>
+    <div className='flex gap-2'>
       <Button
         theme='secondary'
         size='sm'
@@ -205,7 +204,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
           handleReject();
         }}
       />
-    </HStack>
+    </div>
   );
 
   const handleMoveUp = () => {
@@ -230,7 +229,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
       <div className='focusable p-4'>
         <Stack space={2}>
           <div>
-            <HStack alignItems='center' space={3}>
+            <div className='flex items-center gap-3'>
               <div className='flex justify-end' style={{ flexBasis: avatarSize }}>
                 <Icon
                   src={icons[interactionRequest.type]}
@@ -256,7 +255,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
                   </Text>
                 </div>
               )}
-            </HStack>
+            </div>
           </div>
 
           {interactionRequest.status_id && (
diff --git a/packages/nicolium/src/pages/timelines/landing-timeline.tsx b/packages/nicolium/src/pages/timelines/landing-timeline.tsx
index 770465dc8..9a214d91a 100644
--- a/packages/nicolium/src/pages/timelines/landing-timeline.tsx
+++ b/packages/nicolium/src/pages/timelines/landing-timeline.tsx
@@ -7,7 +7,6 @@ import Markup from '@/components/markup';
 import { ParsedContent } from '@/components/statuses/parsed-content';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import { useInstance } from '@/hooks/use-instance';
 import { useRegistrationStatus } from '@/hooks/use-registration-status';
@@ -64,7 +63,7 @@ const LandingTimelinePage = () => {
         <SiteBanner />
       </div>
 
-      <HStack className='mb-4 lg:hidden' justifyContent='end' space={4}>
+      <div className='mb-4 flex justify-end gap-4 lg:hidden'>
         <Button theme='tertiary' to='/login'>
           <FormattedMessage id='account.login' defaultMessage='Log in' />
         </Button>
@@ -73,7 +72,7 @@ const LandingTimelinePage = () => {
             <FormattedMessage id='account.register' defaultMessage='Sign up' />
           </Button>
         )}
-      </HStack>
+      </div>
 
       {timelineEnabled && !isError ? (
         <PublicTimelineColumn
diff --git a/packages/nicolium/src/pages/timelines/remote-timeline.tsx b/packages/nicolium/src/pages/timelines/remote-timeline.tsx
index d35f781ae..69f78a761 100644
--- a/packages/nicolium/src/pages/timelines/remote-timeline.tsx
+++ b/packages/nicolium/src/pages/timelines/remote-timeline.tsx
@@ -4,7 +4,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { PublicTimelineColumn } from '@/columns/timeline';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import IconButton from '@/components/ui/icon-button';
 import Text from '@/components/ui/text';
 import PinnedHostsPicker from '@/features/remote-timeline/components/pinned-hosts-picker';
@@ -35,7 +34,7 @@ const RemoteTimelinePage: React.FC = () => {
       {instance && <PinnedHostsPicker host={instance} />}
 
       {!pinned && (
-        <HStack className='mb-4 px-2' space={2}>
+        <div className='mb-4 flex gap-2 px-2'>
           <IconButton
             className='text-gray-400 hover:text-gray-600'
             iconClassName='h-5 w-5'
@@ -50,7 +49,7 @@ const RemoteTimelinePage: React.FC = () => {
               values={{ instance }}
             />
           </Text>
-        </HStack>
+        </div>
       )}
 
       <PublicTimelineColumn
diff --git a/packages/nicolium/src/pages/utils/landing.tsx b/packages/nicolium/src/pages/utils/landing.tsx
index a960ce92c..78b73e17d 100644
--- a/packages/nicolium/src/pages/utils/landing.tsx
+++ b/packages/nicolium/src/pages/utils/landing.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
 import Button from '@/components/ui/button';
 import Card, { CardTitle } from '@/components/ui/card';
 import Column from '@/components/ui/column';
-import HStack from '@/components/ui/hstack';
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import LinkFooter from '@/features/ui/components/link-footer';
@@ -25,14 +24,14 @@ const LandingPage = () => (
             defaultMessage='Nicolium is a feature-rich Fediverse web client.'
           />
         </Text>
-        <HStack justifyContent='end' space={4}>
+        <div className='flex justify-end gap-4'>
           <Button href={sourceCode.url}>
             <FormattedMessage id='landing.source_code' defaultMessage='Source code' />
           </Button>
           <Button to='/login/external' theme='primary'>
             <FormattedMessage id='landing.sign_in' defaultMessage='Sign in' />
           </Button>
-        </HStack>
+        </div>
         <Card variant='rounded'>
           <CardTitle
             title={