feat(apps/web): Small visual tweaks across multiple components

cartesi · Jan 28, 2025 · 4700be4 · 4700be4
1 parent 6809b13
commit 4700be4
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 8 deletions.
diff --git a/apps/web/src/app/applications/[address]/inputs/page.tsx b/apps/web/src/app/applications/[address]/inputs/page.tsx
@@ -75,7 +75,7 @@ const ApplicationInputsPage: FC<ApplicationInputsPageProps> = async (props) => {
                 <Text>Inputs</Text>
             </Breadcrumbs>
 
-            <PageTitle title="Application Inputs" Icon={TbInbox} />
+            <PageTitle title="Inputs" Icon={TbInbox} />
             <Inputs applicationId={params.address} />
         </Stack>
     );

diff --git a/apps/web/src/app/applications/[address]/page.tsx b/apps/web/src/app/applications/[address]/page.tsx
@@ -68,7 +68,7 @@ const ApplicationPage: FC<ApplicationPageProps> = async (props) => {
                 <Address value={params.address as AddressType} icon shorten />
             </Breadcrumbs>
 
-            <PageTitle title="Application Summary" Icon={TbStack2} />
+            <PageTitle title="Summary" Icon={TbStack2} />
             <ApplicationSummary applicationId={params.address} />
         </Stack>
     );

diff --git a/apps/web/src/components/applications/applicationSummary.tsx b/apps/web/src/components/applications/applicationSummary.tsx
@@ -66,7 +66,7 @@ const ApplicationSummary: FC<ApplicationSummaryProps> = ({ applicationId }) => {
     return (
         <Stack>
             <Grid gutter="sm">
-                <Grid.Col span={{ base: 6, md: 3 }} mb="sm">
+                <Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">
                     <SummaryCard
                         title="Inputs"
                         value={data?.inputsConnection?.totalCount ?? 0}

diff --git a/apps/web/src/components/connection/connectionSummary.tsx b/apps/web/src/components/connection/connectionSummary.tsx
@@ -29,21 +29,21 @@ export const ConnectionSummary: FC<ConnectionSummaryProps> = ({ url }) => {
 
     return (
         <>
-            <Grid.Col span={{ base: 6, md: 3 }} mb="sm">
+            <Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">
                 <SummaryCard
                     title="Notices"
                     value={result.data?.notices.totalCount ?? 0}
                     icon={TbAlertTriangle}
                 />
             </Grid.Col>
-            <Grid.Col span={{ base: 6, md: 3 }} mb="sm">
+            <Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">
                 <SummaryCard
                     title="Vouchers"
                     value={result.data?.vouchers.totalCount ?? 0}
                     icon={TbTicket}
                 />
             </Grid.Col>
-            <Grid.Col span={{ base: 6, md: 3 }} mb="sm">
+            <Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">
                 <SummaryCard
                     title="Reports"
                     value={result.data?.reports.totalCount ?? 0}

diff --git a/apps/web/src/components/specification/form/fields/ByteSlices.tsx b/apps/web/src/components/specification/form/fields/ByteSlices.tsx
@@ -242,7 +242,10 @@ const SliceInstructionFields: FC<SliceInstructionFieldsProps> = ({
     }, [key]);
 
     return (
-        <Stack data-testid="slice-instruction-fields">
+        <Stack
+            pl={{ base: 0, xs: "sm" }}
+            data-testid="slice-instruction-fields"
+        >
             <Fieldset p="xs">
                 <Group justify="space-between">
                     <Text fw="bold">Define a slice</Text>

diff --git a/apps/web/src/components/specification/form/fields/Conditions.tsx b/apps/web/src/components/specification/form/fields/Conditions.tsx
@@ -98,7 +98,7 @@ export const AddConditions: FC<AddConditionsProps> = ({
     }, [isValid, conditions, logicalOperator, onConditionalsChange]);
 
     return (
-        <Stack gap="xs">
+        <Stack pl={{ base: 0, xs: "sm" }} gap="xs">
             {conditions.map((cond, idx) => (
                 <Stack key={idx}>
                     {idx > 0 ? (