feat: add content to empty catalogs

src/app/modules/data/detail/data-detail-content.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -14,6 +14,48 @@
  */
 @import 'src/theme/util/_mixins.scss';
 
+stapps-origin-detail {
+  // css hack to make the element stick to the bottom of the scroll container even
+  // when the content is not filling it
+  position: sticky;
+  top: 100vh;
+}
+
+.content-switch {
+  // prevent a scrollbar from appearing in some cases
+  margin-block-start: -1px !important;
+  flex: 1;
+  display: flex;
+  padding: 0 var(--spacing-md);
+
+  ::ng-deep > * {
+    display: flex;
+    height: fit-content;
+    width: 100%;
+    flex-direction: column;
+    @include border-radius-in-parallax(var(--border-radius-default));
+    overflow: hidden;
+    position: relative;
+    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
+    margin-block-end: var(--spacing-xl);
+    background-color: var(--ion-color-primary-contrast);
+    @include content-padding();
+
+    & > ion-thumbnail {
+      background: var(--ion-color-primary);
+    }
+
+    // Firefox doesn't support this yet...
+    @supports selector(:has(*)) {
+      & > .expand-when-space,
+      &:has(> .expand-when-space) {
+        height: unset;
+        flex: 1;
+      }
+    }
+  }
+}
+
 :host ::ng-deep {
   ion-slides.work-locations {
     ion-slide {
@@ -49,21 +91,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-
-  > div {
-    padding: 0 var(--spacing-md);
-
-    & > * {
-      display: block;
-      @include border-radius-in-parallax(var(--border-radius-default));
-      overflow: hidden;
-      position: relative;
-      top: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
-      background-color: var(--ion-color-primary-contrast);
-
-      & > ion-thumbnail {
-        background: var(--ion-color-primary);
-      }
-    }
-  }
 }