Fix card titles breaking out of their containers

Also increase margins between links
binary-butterfly · Jan 17, 2022 · c575e4c · c575e4c
1 parent c534cee
commit c575e4c
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 3 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) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-butterfly-map",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "license": "MIT",
   "private": false,
   "main": "dist/react-butterfly-map.min.js",