Added latest code and made font size small

modules/project_browser_devel/src/Plugin/ProjectBrowserSource/RandomDataPlugin.php

@@ -162,6 +162,8 @@ class RandomDataPlugin extends PluginBase implements ProjectBrowserSourceInterfa
     $categories = $this->getCategories();
     $security_values = $this->getSecurityCoverages();
     $maintenance_values = $this->getMaintenanceStatuses();
+    $broken_image = 'https://image.not/found' . uniqid() . '.jpg';
+    $good_image = 'https://picsum.photos/600/400';
     for ($i = 0; $i < $number_of_projects; $i++) {
       $machine_name = strtolower($this->randomGenerator->word(10));
       $category = array_rand($categories);
@@ -183,7 +185,7 @@ class RandomDataPlugin extends PluginBase implements ProjectBrowserSourceInterfa
         'field_project_images' => [
           [
             'file' => [
-              'uri' => rand(0, 3) ? 'https://picsum.photos/600/400' : 'https://image.not/found.jpg',
+              'uri' => ($i % 3) ? $good_image : $broken_image,
               'resource' => 'image',
             ],
             'alt' => $machine_name . ' logo',

sveltejs/src/FilterApplied.svelte

@@ -23,7 +23,7 @@
   p {
     display: inline-block;
     word-wrap: break-word;
-    font-size: 1rem;
+    font-size: .875rem;
     color: white;
   }
   .filters-applied {

sveltejs/src/Project/ProjectListView.svelte

@@ -45,6 +45,10 @@
 <style>
   /* Small devices (portrait tablets and large phones, 600px and up) */
   @media only screen and (min-width: 600px) {
+
+    .project{
+      padding: 0 2rem;
+    }
     .left {
       padding: 10px;
       width: 10%;
@@ -55,6 +59,7 @@
   @media only screen and (min-width: 992px) {
     .project {
       width: 100%;
+      padding: 0 2rem;
     }
   }
 
@@ -72,7 +77,7 @@
     color: black;
   }
   .main {
-    width: 88%;
+    width: 100%;
   }
 
   @media only screen and (max-width: 1450px) {