From 5b87ef92fc7b4ba3c8a4f539cc9de7aa299af6e2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 25 Feb 2021 14:10:21 +0300
Subject: [PATCH] Fixed #1023 - Add responsive and breakpoint props to
 OrderList and PickList

---
 public/themes/arya-blue/theme.css             | 66 +++-------------
 public/themes/arya-green/theme.css            | 66 +++-------------
 public/themes/arya-orange/theme.css           | 66 +++-------------
 public/themes/arya-purple/theme.css           | 66 +++-------------
 public/themes/bootstrap4-dark-blue/theme.css  | 66 +++-------------
 .../themes/bootstrap4-dark-purple/theme.css   | 66 +++-------------
 public/themes/bootstrap4-light-blue/theme.css | 46 +----------
 .../themes/bootstrap4-light-purple/theme.css  | 46 +----------
 public/themes/fluent-light/theme.css          | 46 +----------
 public/themes/luna-amber/theme.css            | 64 +++------------
 public/themes/luna-blue/theme.css             | 64 +++------------
 public/themes/luna-green/theme.css            | 64 +++------------
 public/themes/luna-pink/theme.css             | 64 +++------------
 public/themes/md-dark-deeppurple/theme.css    | 66 +++-------------
 public/themes/md-dark-indigo/theme.css        | 66 +++-------------
 public/themes/md-light-deeppurple/theme.css   | 46 +----------
 public/themes/md-light-indigo/theme.css       | 46 +----------
 public/themes/mdc-dark-deeppurple/theme.css   | 66 +++-------------
 public/themes/mdc-dark-indigo/theme.css       | 66 +++-------------
 public/themes/mdc-light-deeppurple/theme.css  | 46 +----------
 public/themes/mdc-light-indigo/theme.css      | 46 +----------
 public/themes/nova-accent/theme.css           | 46 +----------
 public/themes/nova-alt/theme.css              | 46 +----------
 public/themes/nova-vue/theme.css              | 46 +----------
 public/themes/nova/theme.css                  | 46 +----------
 public/themes/rhea/theme.css                  | 46 +----------
 public/themes/saga-blue/theme.css             | 46 +----------
 public/themes/saga-green/theme.css            | 46 +----------
 public/themes/saga-orange/theme.css           | 46 +----------
 public/themes/saga-purple/theme.css           | 46 +----------
 public/themes/vela-blue/theme.css             | 66 +++-------------
 public/themes/vela-green/theme.css            | 66 +++-------------
 public/themes/vela-orange/theme.css           | 66 +++-------------
 public/themes/vela-purple/theme.css           | 66 +++-------------
 src/components/orderlist/OrderList.d.ts       |  2 +
 src/components/orderlist/OrderList.vue        | 63 ++++++++++++++-
 src/components/picklist/PickList.d.ts         |  2 +
 src/components/picklist/PickList.vue          | 77 ++++++++++++++++++-
 src/views/orderlist/OrderListDoc.vue          | 12 +++
 src/views/picklist/PickListDoc.vue            | 12 +++
 40 files changed, 408 insertions(+), 1676 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 38b21c4ac..217f8dcb1 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
-  --surface-100: #060606;
-  --surface-200: #0c0c0c;
-  --surface-300: #121212;
-  --surface-400: #181818;
-  --surface-500: #1e1e1e;
-  --surface-600: #4b4b4b;
-  --surface-700: #787878;
-  --surface-800: #a5a5a5;
-  --surface-900: #d2d2d2;
+  --surface-50: #080808;
+  --surface-100: #0c0c0c;
+  --surface-200: #111;
+  --surface-300: #1a1a1a;
+  --surface-400: #1e1e1e;
+  --surface-500: #151515;
+  --surface-600: #404040;
+  --surface-700: #626262;
+  --surface-800: #838383;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #64B5F6;
   border-radius: 50%;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index e2d4be12f..8c7cdbe7a 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
-  --surface-100: #060606;
-  --surface-200: #0c0c0c;
-  --surface-300: #121212;
-  --surface-400: #181818;
-  --surface-500: #1e1e1e;
-  --surface-600: #4b4b4b;
-  --surface-700: #787878;
-  --surface-800: #a5a5a5;
-  --surface-900: #d2d2d2;
+  --surface-50: #080808;
+  --surface-100: #0c0c0c;
+  --surface-200: #111;
+  --surface-300: #1a1a1a;
+  --surface-400: #1e1e1e;
+  --surface-500: #151515;
+  --surface-600: #404040;
+  --surface-700: #626262;
+  --surface-800: #838383;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #81C784;
   border-radius: 50%;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 3ae9b656b..a5f94421d 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
-  --surface-100: #060606;
-  --surface-200: #0c0c0c;
-  --surface-300: #121212;
-  --surface-400: #181818;
-  --surface-500: #1e1e1e;
-  --surface-600: #4b4b4b;
-  --surface-700: #787878;
-  --surface-800: #a5a5a5;
-  --surface-900: #d2d2d2;
+  --surface-50: #080808;
+  --surface-100: #0c0c0c;
+  --surface-200: #111;
+  --surface-300: #1a1a1a;
+  --surface-400: #1e1e1e;
+  --surface-500: #151515;
+  --surface-600: #404040;
+  --surface-700: #626262;
+  --surface-800: #838383;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFD54F;
   border-radius: 50%;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 0062ff7bf..f5366b2ea 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030303;
-  --surface-100: #060606;
-  --surface-200: #0c0c0c;
-  --surface-300: #121212;
-  --surface-400: #181818;
-  --surface-500: #1e1e1e;
-  --surface-600: #4b4b4b;
-  --surface-700: #787878;
-  --surface-800: #a5a5a5;
-  --surface-900: #d2d2d2;
+  --surface-50: #080808;
+  --surface-100: #0c0c0c;
+  --surface-200: #111;
+  --surface-300: #1a1a1a;
+  --surface-400: #1e1e1e;
+  --surface-500: #151515;
+  --surface-600: #404040;
+  --surface-700: #626262;
+  --surface-800: #838383;
+  --surface-900: #a5a5a5;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #BA68C8;
   border-radius: 50%;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index eda094c67..64aae8b33 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #212529;
-  --surface-100: #343a40;
-  --surface-200: #495057;
-  --surface-300: #6c757d;
-  --surface-400: #adb5bd;
-  --surface-500: #ced4da;
-  --surface-600: #dee2e6;
-  --surface-700: #e9ecef;
-  --surface-800: #f8f9fa;
-  --surface-900: #f9fafb;
+  --surface-50: #111418;
+  --surface-100: #171c22;
+  --surface-200: #1d232b;
+  --surface-300: #242b34;
+  --surface-400: #2a323d;
+  --surface-500: #4a515a;
+  --surface-600: #6a7077;
+  --surface-700: #8a8e94;
+  --surface-800: #aaadb1;
+  --surface-900: #cacccf;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #8dd0ff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2730,34 +2716,6 @@
   background: #8dd0ff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 6156bad51..646b4dea2 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#151515;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #212529;
-  --surface-100: #343a40;
-  --surface-200: #495057;
-  --surface-300: #6c757d;
-  --surface-400: #adb5bd;
-  --surface-500: #ced4da;
-  --surface-600: #dee2e6;
-  --surface-700: #e9ecef;
-  --surface-800: #f8f9fa;
-  --surface-900: #f9fafb;
+  --surface-50: #111418;
+  --surface-100: #171c22;
+  --surface-200: #1d232b;
+  --surface-300: #242b34;
+  --surface-400: #2a323d;
+  --surface-500: #4a515a;
+  --surface-600: #6a7077;
+  --surface-700: #8a8e94;
+  --surface-800: #aaadb1;
+  --surface-900: #cacccf;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #c298d8;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2730,34 +2716,6 @@
   background: #c298d8;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index d7c4402bf..aca46c0a2 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #495057;
   --surface-800: #343a40;
   --surface-900: #212529;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007bff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #212529;
@@ -2730,34 +2716,6 @@
   background: #007bff;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 36b1b11fb..c2978db78 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #495057;
   --surface-800: #343a40;
   --surface-900: #212529;
+  --content-padding:1.25rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #883cae;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #212529;
@@ -2730,34 +2716,6 @@
   background: #883cae;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1.25rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index f49bd71bf..af175cee9 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #252423;
   --surface-800: #1b1a19;
   --surface-900: #11100f;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #edebe9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #f3f2f1;
   color: #323130;
@@ -2718,34 +2704,6 @@
   background: #edebe9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 9d5be4c29..54144225a 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
-  --surface-100: #0a0a0a;
-  --surface-200: #141414;
-  --surface-300: #1e1e1e;
-  --surface-400: #282828;
-  --surface-500: #323232;
-  --surface-600: #5b5b5b;
-  --surface-700: #848484;
+  --surface-50: #141414;
+  --surface-100: #1c1c1c;
+  --surface-200: #232323;
+  --surface-300: #2b2b2b;
+  --surface-400: #323232;
+  --surface-500: #515151;
+  --surface-600: #707070;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #FFE082;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #FFE082;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 4986824d6..3944038ab 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
-  --surface-100: #0a0a0a;
-  --surface-200: #141414;
-  --surface-300: #1e1e1e;
-  --surface-400: #282828;
-  --surface-500: #323232;
-  --surface-600: #5b5b5b;
-  --surface-700: #848484;
+  --surface-50: #141414;
+  --surface-100: #1c1c1c;
+  --surface-200: #232323;
+  --surface-300: #2b2b2b;
+  --surface-400: #323232;
+  --surface-500: #515151;
+  --surface-600: #707070;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #81D4FA;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #81D4FA;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 1a944c1ae..ca9af02db 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
-  --surface-100: #0a0a0a;
-  --surface-200: #141414;
-  --surface-300: #1e1e1e;
-  --surface-400: #282828;
-  --surface-500: #323232;
-  --surface-600: #5b5b5b;
-  --surface-700: #848484;
+  --surface-50: #141414;
+  --surface-100: #1c1c1c;
+  --surface-200: #232323;
+  --surface-300: #2b2b2b;
+  --surface-400: #323232;
+  --surface-500: #515151;
+  --surface-600: #707070;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #C5E1A5;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #C5E1A5;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index af0d18975..086a32e7a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text: #212529;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #050505;
-  --surface-100: #0a0a0a;
-  --surface-200: #141414;
-  --surface-300: #1e1e1e;
-  --surface-400: #282828;
-  --surface-500: #323232;
-  --surface-600: #5b5b5b;
-  --surface-700: #848484;
+  --surface-50: #141414;
+  --surface-100: #1c1c1c;
+  --surface-200: #232323;
+  --surface-300: #2b2b2b;
+  --surface-400: #323232;
+  --surface-500: #515151;
+  --surface-600: #707070;
+  --surface-700: #8e8e8e;
   --surface-800: #adadad;
-  --surface-900: #d6d6d6;
+  --surface-900: #ccc;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #F48FB1;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #4c4c4c;
   color: #dedede;
@@ -2730,34 +2716,6 @@
   background: #F48FB1;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 4484775a6..e00ac10ba 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
-  --surface-100: #424242;
-  --surface-200: #616161;
-  --surface-300: #757575;
-  --surface-400: #9E9E9E;
-  --surface-500: #BDBDBD;
-  --surface-600: #E0E0E0;
-  --surface-700: #EEEEEE;
-  --surface-800: #F5F5F5;
-  --surface-900: #FAFAFA;
+  --surface-50: #0c0c0c;
+  --surface-100: #111;
+  --surface-200: #151515;
+  --surface-300: #1a1a1a;
+  --surface-400: #1E1E1E;
+  --surface-500: #404040;
+  --surface-600: #626262;
+  --surface-700: #838383;
+  --surface-800: #a5a5a5;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(206, 147, 216, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(206, 147, 216, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 06b0f6d98..e88a4b78f 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#121212;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
-  --surface-100: #424242;
-  --surface-200: #616161;
-  --surface-300: #757575;
-  --surface-400: #9E9E9E;
-  --surface-500: #BDBDBD;
-  --surface-600: #E0E0E0;
-  --surface-700: #EEEEEE;
-  --surface-800: #F5F5F5;
-  --surface-900: #FAFAFA;
+  --surface-50: #0c0c0c;
+  --surface-100: #111;
+  --surface-200: #151515;
+  --surface-300: #1a1a1a;
+  --surface-400: #1E1E1E;
+  --surface-500: #404040;
+  --surface-600: #626262;
+  --surface-700: #838383;
+  --surface-800: #a5a5a5;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(159, 168, 218, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(159, 168, 218, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 7c46d34f6..3eb8a04c5 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 97f9023c3..af8d02ab2 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 3d5caa0c8..8ec48a999 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
-  --surface-100: #424242;
-  --surface-200: #616161;
-  --surface-300: #757575;
-  --surface-400: #9E9E9E;
-  --surface-500: #BDBDBD;
-  --surface-600: #E0E0E0;
-  --surface-700: #EEEEEE;
-  --surface-800: #F5F5F5;
-  --surface-900: #FAFAFA;
+  --surface-50: #0c0c0c;
+  --surface-100: #111;
+  --surface-200: #151515;
+  --surface-300: #1a1a1a;
+  --surface-400: #1E1E1E;
+  --surface-500: #404040;
+  --surface-600: #626262;
+  --surface-700: #838383;
+  --surface-800: #a5a5a5;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 2fa7ebedf..d4fbbb9a9 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #000000;
-  --surface-50: #212121;
-  --surface-100: #424242;
-  --surface-200: #616161;
-  --surface-300: #757575;
-  --surface-400: #9E9E9E;
-  --surface-500: #BDBDBD;
-  --surface-600: #E0E0E0;
-  --surface-700: #EEEEEE;
-  --surface-800: #F5F5F5;
-  --surface-900: #FAFAFA;
+  --surface-50: #0c0c0c;
+  --surface-100: #111;
+  --surface-200: #151515;
+  --surface-300: #1a1a1a;
+  --surface-400: #1E1E1E;
+  --surface-500: #404040;
+  --surface-600: #626262;
+  --surface-700: #838383;
+  --surface-800: #a5a5a5;
+  --surface-900: #c7c7c7;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.16);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 634141dfe..490550fa3 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(103, 58, 183, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 8f21fe4f0..07c664f7a 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 /* roboto-regular - latin-ext_latin */
@@ -2567,22 +2569,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.87);
@@ -2742,34 +2728,6 @@
   background: rgba(63, 81, 181, 0.12);
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.75rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index bbff0c37a..a2b135b5b 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #e02365;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2718,34 +2704,6 @@
   background: #e02365;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 0bb4e5046..70dcf9d88 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index f3a972c64..148a8087c 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #41b883;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #41b883;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index ff2034bbf..453ade274 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2555,22 +2557,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #eaeaea;
   color: #333333;
@@ -2730,34 +2716,6 @@
   background: #007ad9;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index c55492bce..8a681e358 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #324249;
   --surface-800: #222c31;
   --surface-900: #111618;
+  --content-padding:0.571rem 1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #AFD3C8;
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #f4f4f4;
   color: #666666;
@@ -2718,34 +2704,6 @@
   background: #AFD3C8;
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 0.571rem 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 0 none;
   border-radius: 50%;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index cf693ed7f..e2078ad85 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #E3F2FD;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #E3F2FD;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #2196F3;
   border-radius: 50%;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 4c42a30dd..4c735a192 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #E8F5E9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #E8F5E9;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #4CAF50;
   border-radius: 50%;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 646f883fc..f8eb78626 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #FFF3E0;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #FFF3E0;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFC107;
   border-radius: 50%;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index dd527f1ea..464aacbd5 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -22,6 +22,8 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: #F3E5F5;
 }
 
-@media screen and (max-width: 769px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: #e9ecef;
   color: #495057;
@@ -2718,34 +2704,6 @@
   background: #F3E5F5;
 }
 
-@media screen and (max-width: 769px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #9C27B0;
   border-radius: 50%;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 6bf6ee8c0..12eb5eb95 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
-  --surface-100: #06090d;
-  --surface-200: #0c121a;
-  --surface-300: #131b26;
-  --surface-400: #192433;
-  --surface-500: #1f2d40;
-  --surface-600: #4c5766;
-  --surface-700: #79818c;
-  --surface-800: #a5abb3;
-  --surface-900: #d2d5d9;
+  --surface-50: #0c121a;
+  --surface-100: #111923;
+  --surface-200: #161f2d;
+  --surface-300: #1a2636;
+  --surface-400: #1f2d40;
+  --surface-500: #1a2636;
+  --surface-600: #414d5d;
+  --surface-700: #626c79;
+  --surface-800: #848c96;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #64B5F6;
   border-radius: 50%;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 355ff695d..e415292be 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
-  --surface-100: #06090d;
-  --surface-200: #0c121a;
-  --surface-300: #131b26;
-  --surface-400: #192433;
-  --surface-500: #1f2d40;
-  --surface-600: #4c5766;
-  --surface-700: #79818c;
-  --surface-800: #a5abb3;
-  --surface-900: #d2d5d9;
+  --surface-50: #0c121a;
+  --surface-100: #111923;
+  --surface-200: #161f2d;
+  --surface-300: #1a2636;
+  --surface-400: #1f2d40;
+  --surface-500: #1a2636;
+  --surface-600: #414d5d;
+  --surface-700: #626c79;
+  --surface-800: #848c96;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #81C784;
   border-radius: 50%;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 697936510..5d3334ea4 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#212529;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
-  --surface-100: #06090d;
-  --surface-200: #0c121a;
-  --surface-300: #131b26;
-  --surface-400: #192433;
-  --surface-500: #1f2d40;
-  --surface-600: #4c5766;
-  --surface-700: #79818c;
-  --surface-800: #a5abb3;
-  --surface-900: #d2d5d9;
+  --surface-50: #0c121a;
+  --surface-100: #111923;
+  --surface-200: #161f2d;
+  --surface-300: #1a2636;
+  --surface-400: #1f2d40;
+  --surface-500: #1a2636;
+  --surface-600: #414d5d;
+  --surface-700: #626c79;
+  --surface-800: #848c96;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(255, 213, 79, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #FFD54F;
   border-radius: 50%;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 68d04e4a9..d043ba4a2 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -12,16 +12,18 @@
   --primary-color-text:#ffffff;
   --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #000000;
-  --surface-50: #030406;
-  --surface-100: #06090d;
-  --surface-200: #0c121a;
-  --surface-300: #131b26;
-  --surface-400: #192433;
-  --surface-500: #1f2d40;
-  --surface-600: #4c5766;
-  --surface-700: #79818c;
-  --surface-800: #a5abb3;
-  --surface-900: #d2d5d9;
+  --surface-50: #0c121a;
+  --surface-100: #111923;
+  --surface-200: #161f2d;
+  --surface-300: #1a2636;
+  --surface-400: #1f2d40;
+  --surface-500: #1a2636;
+  --surface-600: #414d5d;
+  --surface-700: #626c79;
+  --surface-800: #848c96;
+  --surface-900: #a5abb3;
+  --content-padding:1rem;
+  --inline-spacing:0.5rem;
 }
 
 * {
@@ -2543,22 +2545,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -2718,34 +2704,6 @@
   background: rgba(186, 104, 200, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "";
-  }
-}
 .p-timeline .p-timeline-event-marker {
   border: 2px solid #BA68C8;
   border-radius: 50%;
diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts
index 4d01b6425..3e9ba3ca0 100755
--- a/src/components/orderlist/OrderList.d.ts
+++ b/src/components/orderlist/OrderList.d.ts
@@ -6,6 +6,8 @@ interface OrderListProps {
     selection?: any[];
     metaKeySelection?: boolean;
     listStyle?: any;
+    responsive?: boolean;
+    breakpoint?: string;
 }
 
 declare class OrderList {
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 716139221..dd7e45577 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -25,8 +25,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -51,21 +50,38 @@ export default {
         metaKeySelection: {
             type: Boolean,
             default: true
+        },
+        responsive: {
+            type: Boolean,
+            default: true
+        },
+        breakpoint: {
+            type: String,
+            default: '960px'
         }
     },
     itemTouched: false,
     reorderDirection: null,
+    styleElement: null,
     data() {
         return {
             d_selection: this.selection
         }
     },
+    beforeUnmount() {
+        this.destroyStyle();
+    },
     updated() {
         if (this.reorderDirection) {
             this.updateListScroll();
             this.reorderDirection = null;
         }
     },
+    mounted() {
+        if (this.responsive) {
+            this.createStyle();
+        }
+    },
     methods: {
         getItemKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
@@ -292,6 +308,49 @@ export default {
                     break;
                 }
             }
+        },
+        createStyle() {
+			if (!this.styleElement) {
+                this.$el.setAttribute(this.attributeSelector, '');
+				this.styleElement = document.createElement('style');
+				this.styleElement.type = 'text/css';
+				document.head.appendChild(this.styleElement);
+
+                let innerHTML = `
+@media screen and (max-width: ${this.breakpoint}) {
+    .p-orderlist[${this.attributeSelector}] {
+        flex-direction: column;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button:last-child {
+        margin-right: 0;
+    }
+}
+`;
+                
+                this.styleElement.innerHTML = innerHTML;
+			}
+		},
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
+        }
+    },
+    computed: {
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {
diff --git a/src/components/picklist/PickList.d.ts b/src/components/picklist/PickList.d.ts
index ea6911e83..d6642c00b 100755
--- a/src/components/picklist/PickList.d.ts
+++ b/src/components/picklist/PickList.d.ts
@@ -6,6 +6,8 @@ interface PickListProps {
     dataKey?: string;
     metaKeySelection?: boolean;
     listStyle?: any;
+    responsive?: boolean;
+    breakpoint?: string;
 }
 
 declare class PickList {
diff --git a/src/components/picklist/PickList.vue b/src/components/picklist/PickList.vue
index 3d2ba8555..2a0e1497b 100755
--- a/src/components/picklist/PickList.vue
+++ b/src/components/picklist/PickList.vue
@@ -49,8 +49,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils} from 'primevue/utils';
-import {DomHandler} from 'primevue/utils';
+import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -75,10 +74,19 @@ export default {
         metaKeySelection: {
             type: Boolean,
             default: true
+        },
+        responsive: {
+            type: Boolean,
+            default: true
+        },
+        breakpoint: {
+            type: String,
+            default: '960px'
         }
     },
     itemTouched: false,
     reorderDirection: null,
+    styleElement: null,
     data() {
         return {
             d_selection: this.selection
@@ -91,6 +99,14 @@ export default {
             this.reorderDirection = null;
         }
     },
+    beforeUnmount() {
+        this.destroyStyle();
+    },
+    mounted() {
+        if (this.responsive) {
+            this.createStyle();
+        }
+    },
     watch: {
         selection(newValue) {
             this.d_selection = newValue;
@@ -461,6 +477,60 @@ export default {
                     break;
                 }
             }
+        },
+        createStyle() {
+			if (!this.styleElement) {
+                this.$el.setAttribute(this.attributeSelector, '');
+				this.styleElement = document.createElement('style');
+				this.styleElement.type = 'text/css';
+				document.head.appendChild(this.styleElement);
+
+                let innerHTML = `
+@media screen and (max-width: ${this.breakpoint}) {
+    .p-picklist[${this.attributeSelector}] {
+        flex-direction: column;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {
+        margin-right: 0;
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-right:before {
+        content: "e930"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {
+        content: "e92c"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-left:before {
+        content: "e933"
+    }
+
+    .p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {
+        content: "e92f"
+    }
+}
+`;
+                
+                this.styleElement.innerHTML = innerHTML;
+			}
+		},
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
         }
     },
     computed: {
@@ -469,6 +539,9 @@ export default {
         },
         targetList() {
             return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     },
     components: {
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 2017bf029..203000b9a 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -104,6 +104,18 @@ import OrderList from 'primevue/orderlist';
                                 <td>object</td>
                                 <td>null</td>
                                 <td>Inline style of the the list element.</td>
+                            </tr>
+                            <tr>
+                                <td>responsive</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the list optimizes layout based on screen size.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoint</td>
+                                <td>string</td>
+                                <td>960px</td>
+                                <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
                             </tr>
 						</tbody>
 					</table>
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 86461645a..bdc74c7c6 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -117,6 +117,18 @@ import PickList from 'primevue/picklist';
                                 <td>object</td>
                                 <td>null</td>
                                 <td>Inline style of the the list element.</td>
+                            </tr>
+                            <tr>
+                                <td>responsive</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the list optimizes layout based on screen size.</td>
+                            </tr>
+                            <tr>
+                                <td>breakpoint</td>
+                                <td>string</td>
+                                <td>960px</td>
+                                <td>The breakpoint to define the maximum width boundary when responsiveness is enabled.</td>
                             </tr>
 						</tbody>
 					</table>