From d14834d517dd20c623ae98e0476696d71822c762 Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Sat, 12 Aug 2023 13:16:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20remove=20icon=20alignment=20on?=
 =?UTF-8?q?=20column=20stat=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/dnshole/DnsHoleSummary.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgets/dnshole/DnsHoleSummary.tsx b/src/widgets/dnshole/DnsHoleSummary.tsx
index 6a525eb00..9b25e5efd 100644
--- a/src/widgets/dnshole/DnsHoleSummary.tsx
+++ b/src/widgets/dnshole/DnsHoleSummary.tsx
@@ -9,7 +9,6 @@ import {
   TablerIconsProps,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import React from 'react';
 import { useConfigContext } from '~/config/provider';
 import { RouterOutputs, api } from '~/utils/api';
 
@@ -120,6 +119,7 @@ type StatCardProps = {
 const StatCard = ({ item, data, usePiHoleColors }: StatCardProps) => {
   const { t } = useTranslation('modules/dns-hole-summary');
   const { ref, height, width } = useElementSize();
+  const isLong = width > height + 20;
 
   return (
     <Card
@@ -138,14 +138,14 @@ const StatCard = ({ item, data, usePiHoleColors }: StatCardProps) => {
           w="100%"
           align="center"
           justify="space-evenly"
-          direction={width > height + 20 ? 'row' : 'column'}
+          direction={isLong ? 'row' : 'column'}
         >
           <item.icon size={30} style={{ margin: '0 10' }} />
           <Flex
             justify="center"
             direction="column"
             style={{
-              flex: 1,
+              flex: isLong ? 1 : undefined,
             }}
           >
             <Text align="center" lh={1.2} size="md" weight="bold">