views label widths

components/thing1/readme.txt

@@ -0,0 +1,15 @@
+Using it
+
+From any Twig template in your theme, use include with the namespaced name. The namespace is your theme's machine name:
+
+twig
+{{ include('mytheme:test-card', { heading: 'Hello' }, with_context = false) }}
+
+For slots, use embed:
+
+twig
+{% embed 'mytheme:test-card' with { heading: 'Hello' } %}
+  {% block body %}
+    <p>Some content here.</p>
+  {% endblock %}
+{% endembed %}

components/thing1/thing1.component.yml

@@ -0,0 +1,12 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Thing1
+status: experimental
+props:
+  type: object
+  properties:
+    heading:
+      type: string
+      title: Heading
+slots:
+  body:
+    title: Body

components/thing1/thing1.js

@@ -0,0 +1,9 @@
+(function (Drupal, once) {
+  Drupal.behaviors.thing1 = {
+    attach(context) {
+      once("thing1", ".thing1", context).forEach((el) => {
+        // your code
+      });
+    },
+  };
+})(Drupal, once);

components/thing1/thing1.twig

@@ -0,0 +1,6 @@
+<div {{ attributes.addClass('thing1') }}>
+  <h3 class="thing1__heading">{{ heading }}</h3>
+  <div class="thing1__body">
+    {% block body %}{% endblock %}
+  </div>
+</div>

css/base/base.css

@@ -32,6 +32,7 @@ body {
   background-image: url("../../images/tile.jpg");
   /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");*/
   /*background-position: top left; [> LTR <]*/
+  background-attachment: fixed;
 }
 
 body.is-fixed {

css/components/islandora_mods.css

@@ -75,16 +75,36 @@ div#site-header__inner {
   /* width: 6em; */
   /* display: inline-block; */
 }
-.grid-item {
-  .views-field.views-field-field-abstract {
-    /* display: flex; */
-  }
 
   .views-field.views-field-field-abstract li {
     list-style-type: none;
     /* display: ruby; */
   }
 }
+
+/* Ensure the container is a flexbox */
+.metadata .views-field {
+  display: flex;
+  align-items: flex-start; /* Keeps labels aligned to the top of multi-line content */
+  margin-bottom: 0.5rem;   /* Optional: adds spacing between rows */
+}
+
+/* Force uniform width on labels */
+.metadata .views-label {
+  --label-width: 7em;
+  flex: 0 0 var(--label-width);           /* Fixed width: No grow, No shrink, 7em basis */
+  min-width: var(--label-width);          /* Prevents shrinking below 7em */
+  width: var(--label-width);              /* Consistency across older browsers */
+  margin-right: 1em;       /* Creates a consistent gap before the content */
+  font-weight: bold;       /* Optional styling preference */
+  box-sizing: border-box;
+}
+
+/* Ensure content takes up the remaining space */
+.metadata .field-content {
+  flex: 1;                 /* Allows content to fill the rest of the row */
+  min-width: 0;            /* Prevents long text from breaking the flex container */
+}
 /* ==========================================================================
    Search & Facets
    ========================================================================== */

css/layout/social-bar.css

@@ -17,7 +17,7 @@
     width: var(--content-left);
     background-color: #ece8e3;
     background-image: url(../../images/tile.jpg);
-
+    background-attachment: fixed;
   }
 }