Issue #184 solved - Long Template Name intersects with Logo

[naveen8801]

Closes #184

This pull request solves the mentioned issue by changing the CSS styling of logo in ' LibraryItemCard.js ' .

Changes

This issue is solved by changing ' itemLogoStyle ' in ' LibraryItemCard.js ' :

NOW ->

const itemLogoStyle = { maxHeight: "20px", float: "right", display: "inline-block", objectFit: "contain", };

INITIALLY ->

const itemLogoStyle = { position: 'absolute', top: '13px', right: '16px', maxHeight: '23px', };

Now if , logo src property is passed to Image component then logo will be visible and text will be wrapped around logo as shown in screenshot .

Flags

Logo src property must passed as a props to Image component to see the changes .

Screenshots or Video

Author Checklist

• [ ] Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• [ ] Vital features and changes captured in unit and/or integration tests
• [ ] Commits messages follow AP format
• [ ] Extend the documentation, if necessary
• [ ] Merging to master from fork:branchname
• [ ] Manual accessibility test performed
  • [ ] Keyboard-only access, including forms
  • [ ] Contrast at least WCAG Level A
  • [ ] Appropriate labels, alt text, and instructions

[irmerk]

I believe the changes from ' to " broke the code and resulted in the errors?

8:18:20 AM: ERR! => Failed to build the preview
8:18:20 AM: ERR! .storybook/preview.js-generated-config-entry.js
8:18:20 AM: ERR! You attempted to import /opt/build/repo/node_modules/@storybook/client-api which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
8:18:20 AM: ERR! You can either move it inside src/, or add a symlink to it from project's node_modules/.