UI improvements on mobile

Author: zobweyt

frontend/src/components/ui/settings/card/card.props.tsx

@@ -8,3 +8,4 @@ export type SettingsCardProps = ParentProps & JSX.StylableSVGAttributes & Settin
 export type SettingsCardHeaderGroupProps = ParentProps & JSX.StylableSVGAttributes;
 export type SettingsCardHeaderProps = ParentProps & JSX.StylableSVGAttributes;
 export type SettingsCardDescriptionProps = ParentProps & JSX.StylableSVGAttributes;
+export type SettingsCardValueProps = ParentProps & JSX.StylableSVGAttributes;

frontend/src/components/ui/settings/card/card.tsx

@@ -9,6 +9,7 @@ import type {
   SettingsCardHeaderGroupProps,
   SettingsCardHeaderProps,
   SettingsCardProps,
+  SettingsCardValueProps,
 } from "./card.props";
 
 import { styles } from "./card.styles";
@@ -36,5 +37,28 @@ export const SettingsCardDescription = <T extends ValidComponent = "p">(
   props: PolymorphicProps<T, SettingsCardDescriptionProps>,
 ) => {
   const [local, others] = splitProps(props, ["class"]);
-  return <Polymorphic as="p" class={merge("text-xs text-fg-muted", local.class)} {...others} />;
+  return (
+    <Polymorphic
+      as="p"
+      class={merge("text-xs text-fg-muted max-md:hidden max-md:leading-none", local.class)}
+      {...others}
+    />
+  );
+};
+
+export const SettingsCardValue = <T extends ValidComponent = "span">(
+  props: PolymorphicProps<T, SettingsCardValueProps>,
+) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return (
+    <Polymorphic
+      as="span"
+      class={merge(
+        "text-xs text-fg-muted max-md:leading-none",
+        "transition-[opacity,color] group-data-[expanded]/collapsible:opacity-0",
+        local.class,
+      )}
+      {...others}
+    />
+  );
 };

frontend/src/components/ui/settings/card/index.tsx

@@ -1,5 +1,12 @@
 import { Icon } from "solid-heroicons";
-import { SettingsCardDescription, SettingsCardHeader, SettingsCardHeaderGroup, SettingsCardRoot } from "./card";
+
+import {
+  SettingsCardDescription,
+  SettingsCardHeader,
+  SettingsCardHeaderGroup,
+  SettingsCardRoot,
+  SettingsCardValue,
+} from "./card";
 
 export * from "./card";
 export * from "./card.props";
@@ -10,4 +17,5 @@ export const SettingsCard = Object.assign(SettingsCardRoot, {
   HeaderGroup: SettingsCardHeaderGroup,
   Header: SettingsCardHeader,
   Description: SettingsCardDescription,
+  Value: SettingsCardValue,
 });

frontend/src/routes/(sidebar)/(authenticated)/settings/account.tsx

@@ -61,7 +61,7 @@ export default function Account() {
                       {i18n.t.routes.settings.account.sections.security.cards.email.description()}
                     </SettingsCard.Description>
                   </SettingsCard.HeaderGroup>
-                  <SettingsCard.Description>{user().email}</SettingsCard.Description>
+                  <SettingsCard.Value>{user().email}</SettingsCard.Value>
                   <SettingsCard.Icon path={chevronRight} class="size-4" />
                 </SettingsCard>
 

frontend/src/routes/(sidebar)/settings.tsx

@@ -59,9 +59,9 @@ export default function Settings() {
                   {i18n.t.routes.settings.sections.appearance.cards.theme.description()}
                 </SettingsCard.Description>
               </SettingsCard.HeaderGroup>
-              <SettingsCard.Description class="transition-all group-data-[expanded]/collapsible:opacity-0">
+              <SettingsCard.Value>
                 {i18n.t.routes.settings.sections.appearance.cards.theme.options[theme.theme()]()}
-              </SettingsCard.Description>
+              </SettingsCard.Value>
               <SettingsExpander.Indicator />
             </SettingsExpander.Trigger>
             <SettingsExpander.Content>
@@ -97,7 +97,7 @@ export default function Settings() {
                 {i18n.t.routes.settings.sections.about.cards.app.description()}
               </SettingsCard.Description>
             </SettingsCard.HeaderGroup>
-            <SettingsCard.Description as="code">{import.meta.env.VITE_APP_VERSION}</SettingsCard.Description>
+            <SettingsCard.Value as="code">{import.meta.env.VITE_APP_VERSION}</SettingsCard.Value>
           </SettingsCard>
         </SettingsGroup>
       </section>