Implement tablet page layout improvement: move tablet type below title

Co-authored-by: adameat <[email protected]>

Author: Copilot

src/containers/Tablet/Tablet.scss

@@ -16,4 +16,11 @@
     &__loader {
         margin-left: var(--g-spacing-2);
     }
+
+    &__tablet-type {
+        font-weight: 400;
+
+        color: var(--g-color-text-secondary);
+        @include mixins.text-body-2();
+    }
 }

src/containers/Tablet/Tablet.tsx

@@ -93,14 +93,11 @@ export function Tablet() {
         );
     }, [dispatch, queryDatabase, id, tabletType]);
 
-    const {Leader, Type} = tablet;
+    const {Leader} = tablet;
     const metaItems: string[] = [];
     if (database) {
         metaItems.push(`${i18n('tablet.meta-database')}: ${database}`);
     }
-    if (Type) {
-        metaItems.push(Type);
-    }
     if (Leader === false) {
         metaItems.push(i18n('tablet.meta-follower').toUpperCase());
     }
@@ -135,7 +132,7 @@ function TabletContent({
     database?: string;
 }) {
     const isEmpty = !Object.keys(tablet).length;
-    const {Overall, HiveId, FollowerId} = tablet;
+    const {Overall, HiveId, FollowerId, Type} = tablet;
 
     const tabletName = `${id}${FollowerId ? `.${FollowerId}` : ''}`;
 
@@ -146,11 +143,14 @@ function TabletContent({
             isEmpty={isEmpty}
         >
             <Flex gap={5} direction="column">
-                <EntityPageTitle
-                    entityName={i18n('tablet.header')}
-                    status={Overall ?? EFlag.Grey}
-                    id={tabletName}
-                />
+                <Flex gap={2} direction="column">
+                    <EntityPageTitle
+                        entityName={i18n('tablet.header')}
+                        status={Overall ?? EFlag.Grey}
+                        id={tabletName}
+                    />
+                    {Type && <div className={b('tablet-type')}>{Type}</div>}
+                </Flex>
                 <TabletControls tablet={tablet} />
                 <TabletInfo tablet={tablet} />
             </Flex>