Fix tags - Make them scrollable

src/components/Categories/categories.css

@@ -1,10 +0,0 @@
-.categories-wrapper {
-    width: 100%;
-    overflow: auto;
-}
-
-.categories-inner {
-    /* width: auto; */
-    display: inline-flex;
-    flex-direction: row;
-}

src/components/Categories/categories.js

@@ -5,8 +5,8 @@ import './categories.css';
 function Categories(props) {
     return (
         `
-        <div class="categories-wrapper">
-            <div class="categories-inner">
+        <div class="swipable-outer">
+            <div class="swipable-inner">
             ${
                 props.categories.map((category) => (
                     CategoryCard({

src/components/RecipeCard/recipecard.css

@@ -14,9 +14,10 @@
 }
 
 .recipe-card-bottom {
-    padding: 8px;
-    padding-right: 16px;
-    height: 120px;
+    margin: 8px;
+    padding-right: 8px;
+    height: calc(120px - 16px);
+    width: calc(100% - 16px);
 }
 
 .recipe-card-image {
@@ -39,7 +40,7 @@
 }
 
 .recipe-card-logo-wrapper {
-    width: 25%;
+    width: 60px;
     height: 100%;
 }
 
@@ -77,15 +78,16 @@
 }
 
 .recipe-card-tags {
+    width: 100%;
     display: inline-flex;
     flex-direction: row;
-    height: 40px;
+    height: 40%;
 }
 
 .recipe-card-tag {
-    margin: 0 16px;
-    margin-top: 4px;
+    margin: 4px;
     padding: 4px 8px;
+    width: max-content;
     border-radius: 4px;
     background-color: darkgray;
 }

src/components/RecipeCard/recipecard.js

@@ -48,19 +48,20 @@ export default function RecipeCard(props) {
                         </div>
                     </div>
                 </div>
-                <div class="recipe-card-tags">
-                    ${
-                        props.recipe.tags.map(tag => (
-                            `
-                            <div class="recipe-card-tag">
-                                ${
-                                    toTitleCase(tag)
-                                }
-                            </div>
-                            `
-                        )).join('')
-                    }
-
+                <div class="recipe-card-tags swipable-outer">
+                    <div class="swipable-inner">
+                        ${
+                            props.recipe.tags.map(tag => (
+                                `
+                                <div class="recipe-card-tag">
+                                    ${
+                                        toTitleCase(tag)
+                                    }
+                                </div>
+                                `
+                            )).join('')
+                        }
+                    </div>
                 </div>
             </div>
         </div>

src/index.css

@@ -12,3 +12,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.swipable-outer {
+  width: 100%;
+  overflow: auto;
+}
+
+.swipable-inner {
+  /* width: auto; */
+  display: inline-flex;
+  flex-direction: row;
+}

src/index.js

@@ -1,5 +1,5 @@
-import './index.css';
 import App from './App';
+import './index.css';
 
 window.addEventListener("load", function () {
     const app = new App();