fix: Card width issue #383 #384
Conversation
Adjusted card classes in useCardClasses to use min-w-sm and min-w-xl for better layout consistency across variants.
Added responsive width classes to card components for better layout across different screen sizes.
Added specific width classes to card examples to improve layout adaptability across various screen sizes.
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughWidth utility classes were added to the documentation examples for the Changes
Suggested labels
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/components/card/examples/FwbCardExample.vue (1)
3-3: Fix attribute formatting to match style guidelines.The added class attribute should follow the project's linting guidelines by placing attributes on separate lines.
- <fwb-card href="#" class="w-sm"> + <fwb-card + href="#" + class="w-sm" + >🧰 Tools
🪛 GitHub Check: lint (18.x)
[warning] 3-3:
'class' should be on a new line
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/components/card.md(3 hunks)docs/components/card/examples/FwbCardExample.vue(1 hunks)docs/components/card/examples/FwbCardExampleHorizontal.vue(1 hunks)docs/components/card/examples/FwbCardExampleImage.vue(1 hunks)src/components/FwbCard/composables/useCardClasses.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint (18.x)
docs/components/card/examples/FwbCardExample.vue
[warning] 3-3:
'class' should be on a new line
🔇 Additional comments (7)
src/components/FwbCard/composables/useCardClasses.ts (1)
17-17: Excellent width constraint improvements!Changing from
max-w-smtomin-w-sm(and similar for other variants) is a smart solution that allows cards to expand with their container while maintaining a minimum width. This change directly addresses issue #383 by providing more flexible width control through additional classes.The implementation is consistent across all card variants (image, default, and horizontal), ensuring a uniform behavior throughout the component.
Also applies to: 21-21, 23-23
docs/components/card/examples/FwbCardExampleImage.vue (1)
7-7: Good example of the new width class usage.Adding
class="w-md"demonstrates how users can now control card width using Tailwind width utilities. This example clearly shows the medium-width card variant that was mentioned in the PR description.docs/components/card/examples/FwbCardExample.vue (1)
3-3: Good example of the small width card variant.Adding
class="w-sm"demonstrates the small card width variant mentioned in the PR description. This provides a clear example of the new component usage.🧰 Tools
🪛 GitHub Check: lint (18.x)
[warning] 3-3:
'class' should be on a new linedocs/components/card/examples/FwbCardExampleHorizontal.vue (1)
7-7: Good example of the large width card variant.Adding
class="w-lg"to the horizontal card variant provides a comprehensive set of examples for the new width control system. Combined with the other examples, users now have a clear reference for all common width variants.docs/components/card.md (3)
23-23: Verify customw-smutility class exists.The default Tailwind CSS configuration does not include a
w-smwidth utility. Please ensure thatw-smis defined in the project's Tailwind config (or documented) so that this example renders correctly.
49-49: Verify customw-mdutility class exists.Similarly, confirm that
w-mdis defined in the Tailwind configuration. Without this class, the image variant example will not apply the intended width.
76-76: Verify customw-lgutility class exists.Ensure that
w-lgis available in the Tailwind config or documentation. If absent, the horizontal variant example won’t reflect the desired width.
A solution made for this issue #383
I changed the
max-w-smclass in the Card component withmin-w-sm. In this way, the Card gets the width of the container in which it is located and the desired width can be given with the class.New way:
Please check and give feedback. I will be waiting, good day. @Sqrcz @cogor @zoltanszogyenyi
Summary by CodeRabbit
Documentation
Style