From 325d81c144c25b235834de2dd66688477843b77f Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 28 May 2020 12:42:30 +0300
Subject: [PATCH] Added flex-wrap and updated themes

---
 public/themes/luna-amber/theme.css       | 7 +++++++
 public/themes/luna-green/theme.css       | 7 +++++++
 public/themes/luna-pink/theme.css        | 7 +++++++
 public/themes/nova-accent/theme.css      | 7 +++++++
 public/themes/nova-alt/theme.css         | 7 +++++++
 public/themes/nova-vue/theme.css         | 7 +++++++
 public/themes/nova/theme.css             | 7 +++++++
 public/themes/rhea/theme.css             | 7 +++++++
 public/themes/saga-blue/theme.css        | 7 +++++++
 public/themes/saga-cyan/theme.css        | 7 +++++++
 public/themes/saga-deeppurple/theme.css  | 7 +++++++
 public/themes/saga-green/theme.css       | 7 +++++++
 public/themes/saga-indigo/theme.css      | 7 +++++++
 public/themes/saga-orange/theme.css      | 7 +++++++
 public/themes/saga-purple/theme.css      | 7 +++++++
 public/themes/saga-teal/theme.css        | 7 +++++++
 public/themes/vela-blue/theme.css        | 7 +++++++
 public/themes/vela-cyan/theme.css        | 7 +++++++
 public/themes/vela-deeppurple/theme.css  | 7 +++++++
 public/themes/vela-green/theme.css       | 7 +++++++
 public/themes/vela-indigo/theme.css      | 7 +++++++
 public/themes/vela-orange/theme.css      | 7 +++++++
 public/themes/vela-purple/theme.css      | 7 +++++++
 public/themes/vela-teal/theme.css        | 7 +++++++
 src/components/breadcrumb/Breadcrumb.vue | 1 +
 src/components/megamenu/MegaMenu.vue     | 1 +
 src/components/paginator/Paginator.vue   | 1 +
 src/components/tabmenu/TabMenu.vue       | 1 +
 src/components/tabview/TabView.vue       | 1 +
 29 files changed, 173 insertions(+)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 17089dcd8..4eef57000 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #585858;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 3393fbef5..13c3ca36a 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #585858;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 8ff0fb744..b2ab9be78 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #585858;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 00c8721e6..ede26b088 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #f4f4f4;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index cbcd9332d..16119aeee 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #f4f4f4;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 4520430ca..8d125bfec 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #f4f4f4;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 8f7e64cf1..c8574c185 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #f4f4f4;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index e3f1c7f28..bbdccba64 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #333333;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #7B95A3;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 14feb4ca6..f46a8e49a 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #1976D2;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index 2f1229f25..e8ccd7e1b 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #00838F;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 0d86de84d..dc2843252 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #512DA8;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index d6cc686ed..ccefcb3a4 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #388E3C;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 020b94d54..62dece955 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #303F9F;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 860f5e25c..642c457dc 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #FFA000;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 3140ddb37..77552d8a8 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #7B1FA2;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index b40d156b8..91ff66f1f 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #00796B;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #e9ecef;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 3eb9cd124..f0cc17b98 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #64B5F6;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 78759291b..f033877dc 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #4DD0E1;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index 4f2e23a8b..c040498ce 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #9575CD;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index e7afe65b8..e0e83764c 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #81C784;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index 92ea87894..0593a1b71 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #7986CB;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index ee8c2dc84..ba4d9c3ea 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #FFD54F;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index b7a57672e..6d2422ce6 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #BA68C8;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index 3ef21cefe..ca9affda7 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -1135,6 +1135,12 @@
 .p-fluid .p-button-icon-only {
   width: 2.357rem;
 }
+.p-fluid .p-buttonset {
+  display: flex;
+}
+.p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
 
 .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
   color: #4DB6AC;
@@ -1273,6 +1279,7 @@
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator {
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator button {
   background-color: #34495E;
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 8c4644958..b1c58c367 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -37,6 +37,7 @@ export default {
     list-style-type: none;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 }
 
 .p-breadcrumb .p-menuitem-text {
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 1d2518c8c..0dc1e95c4 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -345,6 +345,7 @@ export default {
 .p-megamenu-horizontal .p-megamenu-root-list {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 }
 
 /* Vertical */
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index abef0a1fc..97a202907 100755
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -203,6 +203,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-wrap: wrap;
 }
 
 .p-paginator-left-content {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index a57bcad4d..f5976978d 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -69,6 +69,7 @@ export default {
     margin: 0;
     padding: 0;
     list-style-type: none;
+    flex-wrap: wrap;
 }
 
 .p-tabmenu-nav a {
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 44cde8714..bd92919e6 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -96,6 +96,7 @@ export default {
     margin: 0;
     padding: 0;
     list-style-type: none;
+    flex-wrap: wrap;
 }
 
 .p-tabview-nav-link {