reapit / foundations

Foundations platform mono repo
57 stars 21 forks source link

Cropped content on "CardHeading" is visible with "Card With Avatar" component #9988

Closed ss-dimasm closed 10 months ago

ss-dimasm commented 10 months ago

Describe the bug We're using Card With Avatar component to create this UI on our feature, but somehow the cropped content still shown

To Reproduce Steps to reproduce the behaviour eg:

  1. Render based on the passed code below
  2. Reduce the width screen under 500px
  3. See unexpected

Expected behaviour The content displays properly and no cropped content is displayed

Rendered UI image

Code

<CardWrap>
  <CardMainWrap>
    <Avatar>
      <Icon
        icon={getProperEntryFeedIcon(entry)}
        iconSize="small"
        data-testid="feed-icon"
      />
    </Avatar>
    <CardHeadingWrap className={elCardSubHeadingWrapAvatar}>
      <CardHeading data-testid="feed-header">
        Dafs House, Staffin Road, PORTREE, IV51 9HS: letting status changed from
        Tenancy Current - Unavailable to To Let - Available
      </CardHeading>
      <CardSubHeading data-testid="feed-sub-header">
        Property - Lettings Status to To Let
      </CardSubHeading>
      <CardSubHeadingAdditional data-testid="feed-sub-header-additional">
        21/06/2023 10:32 PM by Frank Manning
      </CardSubHeadingAdditional>
    </CardHeadingWrap>
  </CardMainWrap>
</CardWrap>

Additional Content We're using version 4.0.0-beta.4 for the Elements

github-actions[bot] commented 10 months ago

Thank you for taking the time to report a bug. We prioritise bugs depending on the severity and implications, so please ensure that you have provided as much information as possible. If you haven’t already, it really helps us to investigate the bug you have reported if you provide ‘Steps to Replicate’ and any associated screenshots. Please ensure any personal information from the production database is obscured when submitting screenshots. This issue will be reviewed in our weekly refinement sessions and assigned to a specific project board. We may also update the ticket to request additional information, if required. For more information on our processes, please click here

github-actions[bot] commented 10 months ago

This issue has recently been assigned to our ‘Front-end’ project board for review. All issues are reviewed in a weekly refinement session and where applicable, a comment and associated label will be added. If required, we will add a technical specification to the ticket. Please take the time to review the information. When we're ready to schedule the issue, it will be moved to the relevant column where you can continue to track its progress to completion. For more information on our processes, please click here