Auto resize values when they'd overflow the container

Author: DaneEveritt

package.json

@@ -43,6 +43,7 @@
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
         "tailwindcss": "^3.0.24",
+        "use-fit-text": "^2.4.0",
         "uuid": "^3.3.2",
         "xterm": "^4.15.0",
         "xterm-addon-attach": "^0.6.0",

resources/scripts/components/server/console/PowerButtons.tsx

@@ -51,7 +51,6 @@ export default ({ className }: PowerButtonProps) => {
             <Can action={'control.restart'}>
                 <Button.Text
                     className={'w-full sm:w-24'}
-                    variant={Button.Variants.Secondary}
                     disabled={!status}
                     onClick={onButtonClick.bind(this, 'restart')}
                 >
@@ -61,7 +60,6 @@ export default ({ className }: PowerButtonProps) => {
             <Can action={'control.stop'}>
                 <Button.Danger
                     className={'w-full sm:w-24'}
-                    variant={killable ? undefined : Button.Variants.Secondary}
                     disabled={status === 'offline'}
                     onClick={onButtonClick.bind(this, killable ? 'kill' : 'stop')}
                 >

resources/scripts/components/server/console/ServerDetailsBlock.tsx

@@ -146,11 +146,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                     bytesToHuman(stats.rx)
                 }
             </StatBlock>
-            <StatBlock
-                icon={faWifi}
-                title={'Address'}
-                description={`You can connect to your server at: ${allocation}`}
-            >
+            <StatBlock icon={faWifi} title={'Address'}>
                 {allocation}
             </StatBlock>
         </div>

resources/scripts/components/server/console/StatBlock.tsx

@@ -4,6 +4,7 @@ import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import styles from './style.module.css';
+import useFitText from 'use-fit-text';
 
 interface StatBlockProps {
     title: string;
@@ -15,6 +16,8 @@ interface StatBlockProps {
 }
 
 export default ({ title, icon, color, description, className, children }: StatBlockProps) => {
+    const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
+
     return (
         <Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
             <div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
@@ -28,11 +31,15 @@ export default ({ title, icon, color, description, className, children }: StatBl
                         })}
                     />
                 </div>
-                <div className={'flex flex-col justify-center overflow-hidden'}>
+                <div className={'flex flex-col justify-center overflow-hidden w-full'}>
                     <p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
-                    <p className={'text-base md:text-xl font-semibold text-gray-50 truncate'}>
+                    <div
+                        ref={ref}
+                        className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
+                        style={{ fontSize }}
+                    >
                         {children}
-                    </p>
+                    </div>
                 </div>
             </div>
         </Tooltip>

yarn.lock

@@ -7336,6 +7336,11 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -8624,6 +8629,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-fit-text@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/use-fit-text/-/use-fit-text-2.4.0.tgz#d3d1cd72f6d29cfb2233ec0e0b38c6f25d319f67"
+  integrity sha512-Iy4LMrXcdxWlyZ5phntMpJMgyXGB1p3tV73y2r0QrZ6f/thPh+/QU3ie6RCXmjF8tHMs20FKMPskXeDYIla/Ww==
+  dependencies:
+    resize-observer-polyfill "^1.5.1"
+
 use-isomorphic-layout-effect@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"