#124 accounting and implementation columns

_includes/head.html

@@ -43,4 +43,5 @@
 
   <!-- Reusable UI components -->
   <script src="{{ '/assets/js/custom-select.js' | relative_url }}" defer></script>
+  <script src="{{ '/assets/js/custom-tag.js' | relative_url }}" defer></script>
 </head>

assets/css/custom-tag.scss

@@ -0,0 +1,56 @@
+---
+---
+
+.tag {
+    width: fit-content;
+    padding: 2px 12px;
+    border-radius: 9999px;
+
+    color: #FFF;
+    background: #2E2E2E;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+
+    .label {
+        /* Body/XS/Medium */
+        font-family: "Inter";
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        /* 133.333% */
+
+        text-transform: capitalize;
+        text-wrap: nowrap;
+    }
+
+    .material-symbols-rounded.icon {
+        font-size: 12px;
+    }
+
+    &.variant-neutral-800 {
+        background: #3A3A3A;
+    }
+
+    &.variant-neutral-700 {
+        background: #5F5F5F;
+    }
+
+    &.variant-neutral-600 {
+        color: #181818;
+        background: #A1A1A1;
+    }
+
+    &.variant-neutral-500 {
+        color: #181818;
+        background: #DADADA;
+    }
+
+    &.variant-neutral-400 {
+        color: #181818;
+        background: #E7E7E7;
+    }
+}

assets/css/custom.css

@@ -6,11 +6,12 @@
 @import url('sidebar.css');             /* Navigation sidebar component */
 @import url('content.css');             /* Main content area and typography */
 @import url('tables.css');              /* Data tables and table interactions */
-@import url('datatable-overrides.css');              /* Datatable overrides */
+@import url('datatable-overrides.css'); /* Datatable overrides */
 @import url('diagram.css');             /* Diagram component styling */
 @import url('visualizations.css');      /* Data visualizations */
 @import url('side-panel.css');          /* Right-side panel for deployment details */
 @import url('forms.css');               /* Form components and custom selects */
 @import url('custom-select.css');       /* Custom select */
+@import url('custom-tag.css');          /* Custom Tag styling */
 @import url('footer.css');              /* Footer component styling */
 @import url('bib-link.css');            /* Reusable UI components like bibliography tooltips */

assets/css/datatable-overrides.scss

@@ -18,6 +18,25 @@ table.dataTable#deployments-table thead>tr>td {
     padding: 8px;
 }
 
+table.dataTable#deployments-table thead>tr>th {
+    &.sorting,
+    &[has-searchpane="true"] {
+        padding-right: 32px;
+
+        .filter-trigger {
+            right: 14px;
+        }
+    }
+
+    &.sorting[has-searchpane="true"] {
+        padding-right: 64px;
+
+        .filter-trigger {
+            right: 28px;
+        }
+    }
+}
+
 table.dataTable#deployments-table thead>tr>th.sorting,
 table.dataTable#deployments-table thead>tr>th.sorting_asc,
 table.dataTable#deployments-table thead>tr>th.sorting_desc,
@@ -28,7 +47,6 @@ table.dataTable#deployments-table thead>tr>td.sorting_asc,
 table.dataTable#deployments-table thead>tr>td.sorting_desc,
 table.dataTable#deployments-table thead>tr>td.sorting_asc_disabled,
 table.dataTable#deployments-table thead>tr>td.sorting_desc_disabled {
-    padding-right: 64px;
 
     &::before,
     &::after {
@@ -180,6 +198,20 @@ button.filter-trigger {
     display: none !important;
 }
 
+table.dataTable#deployments-table thead>tr>th {
+    .filters-popover-wrapper {
+        left: 0;
+        right: unset;
+    }
+
+    &:last-child {
+        .filters-popover-wrapper {
+            right: 0;
+            left: unset;
+        }
+    }
+}
+
 .filters-popover-wrapper {
     min-width: 150px;
     width: 284px;
@@ -189,7 +221,6 @@ button.filter-trigger {
 
     display: none;
     position: absolute;
-    left: 0;
     top: calc(100% + 4px);
 
     background: #fff;

assets/css/footer.css

@@ -114,10 +114,6 @@
 /* Responsive Design */
 @media (max-width: 1024px) {
 
-  .site-footer-container {
-    flex-direction: column;
-  }
-
   .footer-col-wrapper {
     grid-auto-flow: row;
     gap: 40px;
@@ -131,6 +127,10 @@
 /* Responsive Design */
 @media (max-width: 768px) {
 
+  .site-footer-container {
+    flex-direction: column;
+  }
+
   .site-footer {
     padding-top: 1rem;
     margin-top: 2rem;

assets/css/tables.scss

@@ -69,6 +69,12 @@
 .privacy-loss-column { min-width: 175px; }
 .model-column { min-width: 70px }
 .accounting-column { min-width: 124px; }
+.accounting-cell,
+.implementation-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
 .implementation-column { min-width: 124px; }
 
 /* Table Rows */

assets/js/custom-tag.js

@@ -0,0 +1,50 @@
+// Reusable CustomSelect component (vanilla JS)
+// Usage:
+//   const cs = new CustomSelect(containerElement, 'label', 'className');
+//   cs.onClose = () => { ... };
+// Supports optional close button if onClose is set.
+
+(function (global) {
+    class CustomTag {
+        constructor (container, label = '', className = '') {
+            if (!container) throw new Error('CustomTag: container required');
+            if (!label) throw new Error('CustomTag: label required');
+
+            this.container = container;
+            this.label = label;
+            this.className = className;
+            this.onClose = null;
+            this._render();
+
+            if(this.onClose) {
+                this._bind();
+            }
+        }
+        _render() {
+            this.container.innerHTML = `
+                <div class="tag ${this.className}">
+                    <div class="label">
+                        <span>${this.label}</span>
+                    </div>
+                    ${this.onClose ? `<i class="material-symbols-rounded icon close-button">close</i>` : ''}
+                </div>`;
+            this.closeButton = this.container.querySelector('.close-button');
+        }
+        _bind() {
+            this.closeButton.addEventListener('click', () => this.close());
+        }
+        close() { this.onClose(); }
+    }
+
+    CustomTag.variants = Object.freeze([
+        'neutral-900',
+        // 'neutral-800',
+        'neutral-700',
+        'neutral-600',
+        'neutral-500',
+        'neutral-400',
+    ]);
+
+    // Expose globally (do not overwrite if already defined to allow override)
+    if (!global.CustomTag) global.CustomTag = CustomTag;
+})(window);