Need some guidance on POS extension UI

Extensions
1

I still don’t really understand how Stack works. I thought it behaves like flex for inline and flex-direction: column for block, but it’s not working as I expected.
Here’s my code:

<Navigator>
  <Screen name="ProductScanner" title="Product Scanner">
    <ScrollView>
      <Stack direction="block">
        <Text variant="headingSmall">
          Total items in cart: {totalItemsInCart}
        </Text>
        {product && (
          <Section
            title="Product"
            action={{
              title: "Scan another product",
              onPress: () => {},
            }}
          >
            {/* Product section */}
            <Stack direction="inline" gap="200">
              <Box inlineSize="120px" blockSize="120px">
                <Image src={product?.featuredImage || ""} size="cover" />
              </Box>
              <Stack
                direction="block"
                gap="025"
                paddingBlockStart="200"
                paddingBlockEnd="200"
                paddingInline="100"
              >
                <Text variant="headingSmall">{product.title}</Text>
              </Stack>
            </Stack>
          </Section>
        )}
      </Stack>
    </ScrollView>
  </Screen>
</Navigator>

And here’s the actual UI:

IMG_0279.PNG
IMG_0279.PNG828×1792 66.9 KB

Straight to the point — how can I make it take 100% width ?
Also, is there any way to check the actual generated HTML and CSS ?

2

Hi @anhdd_kuro

No it’s not possible to view the generated HTML/CSS from a POS UI Extension. It’s all trial and error.

But I think you’re embedded Stack might be the issue. I assume you want that stack to extend horizontally across the screen, but it looks like you have a paddingBlockEnd set, which might be limiting the size of the stack.

By default it should extend the entire width of the screen.