fix(tabs): remove tab height 40px compensation

[denispaluca]

Pull Request

📖 Description

The height of the FluentTab is derived from the height of the FluentTabs component. This is done by subtracting 40px from the height of FluentTabs. The 40px is the height of the fluent tabs list. This is not necessary as the FluentTab is rendered inside the tabpanel part of the fluent-tabs web component which already accounts for this. (fluent-tabs is a grid with tablist taking the first row and tabpanel taking the rest.)

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

[dvoituron]

What the current problem with the existing code (40px)? Why did you created this PR?

[vnbaaij]

My question exactly 😁

But the correction is actually needed. This is the current situation:

The fluent-tabs grid is exactly as high as the fluent-tab-panel (where the 40px are substracted)

This is the situation if we would merge your PR:

The fluent-tabs grid would be 40px higher than the fluent-tabs-panel which could lead to layout issues for some cases

[denispaluca]

@vnbaaij You are correct in the example you gave above where the height is given in pixels. But when the height is given as a percentage then the 40px subtraction is not needed.

Maybe the height of FluentTab should be set to 100% be default. It would take 100% of tabpanel (the slot in the web component) which takes the rest of the height from the fluent-tabs. Then you would not need to set it this way.

[denispaluca]

@dvoituron My issue is that I am setting FluentTabs to the height 100%, the FluentTab now has the height 100% - 40px. In this case 100% does not refer to the height of the parent of FluentTabs but the the height of the tabpanel part. The height of tabpanel is already the height of FluentTabs - 40px since fluent-tabs is a grid where with grid-template-rows: auto 1fr where tabpanel is on the second row. This means that the height of the FluentTab will now be 100% - 80px. So i lose 40px of height.