fix table view on mobile

nf-core · Feb 3, 2024 · 3a31adf · 3a31adf
1 parent a9500f8
commit 3a31adf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/components/ListingTableHeader.svelte b/src/components/ListingTableHeader.svelte
@@ -49,4 +49,9 @@
             background-color: $body-tertiary-bg-dark;
         }
     }
+    @include media-breakpoint-down(lg) {
+        .text-nowrap {
+            white-space: normal !important;
+        }
+    }
 </style>
diff --git a/src/components/component/ComponentListing.svelte b/src/components/component/ComponentListing.svelte
@@ -89,15 +89,17 @@
     });
 </script>
 
-<div class={`listing grid px-2 py-4 ${components[0].type}`}>
+<div class={`listing px-0 px-lg-2 py-4 ${components[0].type}`}>
     {#if $DisplayStyle === 'grid'}
-        {#each paginatedItems as component (component.name)}
-            <div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
-                <ComponentCard {component} />
-            </div>
-        {/each}
+        <div class="grid">
+            {#each paginatedItems as component (component.name)}
+                <div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
+                    <ComponentCard {component} />
+                </div>
+            {/each}
+        </div>
     {:else}
-        <table class="table table-responsive mx-3">
+        <table class="table table-responsive">
             <thead>
                 <tr>
                     <ListingTableHeader name="Name" />

diff --git a/src/components/pipeline/PipelinesListing.svelte b/src/components/pipeline/PipelinesListing.svelte
@@ -131,23 +131,25 @@
     });
 </script>
 
-<div class="listing grid px-2 py-4">
+<div class="listing px-2 py-4">
     {#if $DisplayStyle === 'grid'}
-        {#if filteredPipelines.length === 0 && $SearchQuery !== ''}
-            <div class="g-col-12 g-col-md-8 g-start-md-3">
-                <div class="alert alert-secondary text-center" role="alert">
-                    No pipelines found. Try changing your search query or filters.
+        <div class="grid">
+            {#if filteredPipelines.length === 0 && $SearchQuery !== ''}
+                <div class="g-col-12 g-col-md-8 g-start-md-3">
+                    <div class="alert alert-secondary text-center" role="alert">
+                        No pipelines found. Try changing your search query or filters.
+                    </div>
                 </div>
-            </div>
-        {:else}
-            {#each filteredPipelines as pipeline (pipeline.name)}
-                <div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
-                    <PipelineCard {pipeline} />
-                </div>
-            {/each}
-        {/if}
+            {:else}
+                {#each filteredPipelines as pipeline (pipeline.name)}
+                    <div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
+                        <PipelineCard {pipeline} />
+                    </div>
+                {/each}
+            {/if}
+        </div>
     {:else}
-        <table class="table table-hove table-responsive mx-3">
+        <table class="table table-hove table-responsive">
             <thead>
                 <tr>
                     <ListingTableHeader name="Name" />