Merge pull request #12 from binary-butterfly/fix-overflow

Fix card overflow
binary-butterfly · Jan 17, 2022 · 2ba9893 · 2ba9893
2 parents c534cee + 1d3f6ec
commit 2ba9893
Show file tree

Hide file tree

Showing 5 changed files with 1,310 additions and 1,294 deletions.
diff --git a/assets/js/Root.js b/assets/js/Root.js
@@ -41,7 +41,7 @@ const Root = () => {
                     points: [
                         {
                             position: {latitude: 47.850670, longitude: 13.090983},
-                            text: 'This is an example',
+                            text: 'This is an example with very long text that will not overflow it\'s container banananananananananananananananananananananana',
                             additionalInfo: 'Sportplatz',
                             website: 'example.invalid.tld',
                             banana: true,

diff --git a/assets/js/components/Card.js b/assets/js/components/Card.js
@@ -16,4 +16,6 @@ export const CardContent = styled.div`
   border-radius: 0.25rem;
   width: 100%;
   text-align: left!important;
+  overflow-x: hidden;
+  overflow-wrap: anywhere;
 `;
diff --git a/assets/js/components/PointCard.js b/assets/js/components/PointCard.js
@@ -21,6 +21,7 @@ const Link = styled.a`
 const SmallLink = styled(Link)`
   line-height: 0.8rem;
   font-size: 0.8rem !important;
+  margin-bottom: 0.25rem;
 `;
 
 const checkPointHours = (point) => {