Component Spacing

In some layout scenarios, we should consider the impact of different content lengths on the layout. This means that we need to add spacing to the component, even if it seems unnecessary.

Title

In this example, there is a section title and an action button on the right. For now, it looks fine. But let’s see what happens when the title is longer.

This is a title with long text content

As you can see, the text is too close to the action button. Maybe we can consider wrapping, but we will discuss this in another section. Now let's focus on spacing.

If the title had spacing and text truncation, we would not see such problems.

.section__title {
  margin-right: 1rem;
}

This is a title with long text content