Improved layout on browser page if a visualization technique has a lo…

…t of tags or the name is very long (Issue #15)

website/components/browser_item.js

@@ -62,13 +62,13 @@ export const BrowserItem =
     },
     template:
     `
-    <div class="card" style="cursor: pointer;" @click="on_browser_item_click_internal">
-        <img :src="browser_item.images[0]" class="card-img-top" style="height: 150px; object-fit: contain;">
+    <div class="card h-100" style="cursor: pointer;" @click="on_browser_item_click_internal">
+        <img :src="browser_item.images[0]" class="card-img-top m-3 mb-0" style="height: 150px; object-fit: contain;">
         <div class="card-body">
             <h5 class="card-title">{{ browser_item.name }}</h5>
-            <div class="d-flex flex-wrap">
-                <tag v-for="tag of browser_item_filter_tags" :tag="tag" class="me-1" is_highlighted="true" @on_tag_click="on_browser_item_tag_click_internal"></tag>
-                <tag v-for="tag of browser_item_tags" :tag="tag" class="me-1" @on_tag_click="on_browser_item_tag_click_internal"></tag>
+            <div class="d-flex flex-wrap" style="margin: -0.125rem">
+                <tag v-for="tag of browser_item_filter_tags" :tag="tag" style="margin: 0.125rem" is_highlighted="true" @on_tag_click="on_browser_item_tag_click_internal"></tag>
+                <tag v-for="tag of browser_item_tags" :tag="tag" style="margin: 0.125rem" @on_tag_click="on_browser_item_tag_click_internal"></tag>
             </div>
         </div>
     </div>