From 8926e53af06fb3dac965922262382ffb50d26aef Mon Sep 17 00:00:00 2001
From: Vitaly <vitaly.raichev@epicmax.co>
Date: Wed, 1 Jun 2022 10:06:18 +0300
Subject: [PATCH] [#1885] Fix `VaTabs` `grow` (#1886)

* fix: container width

* fix: replace useColor with useColors
---
 packages/ui/src/components/va-tabs/VaTabs.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-tabs/VaTabs.vue b/packages/ui/src/components/va-tabs/VaTabs.vue
index 77c835362c..6dbc727a3f 100644
--- a/packages/ui/src/components/va-tabs/VaTabs.vue
+++ b/packages/ui/src/components/va-tabs/VaTabs.vue
@@ -72,7 +72,7 @@ import {
 import VaButton from '../va-button'
 import VaConfig from '../va-config'
 import { useStateful, useStatefulProps } from '../../composables/useStateful'
-import { useColor } from '../../composables/useColor'
+import { useColors } from '../../composables/useColor'
 import { TabsViewKey, TabComponent } from './types'
 import { useResizeObserver } from '../../composables/useResizeObserver'
 
@@ -112,7 +112,6 @@ export default defineComponent({
     const tabsContentOffset = ref(0)
     const startingXPoint = ref(0)
     const animationIncluded = ref(false)
-    const { colorComputed } = useColor(props)
     const { valueComputed: tabSelected }: { valueComputed: Ref<string | number | null> } = useStateful(props, emit)
     const tabConfig = reactive({
       VaTab: {
@@ -140,6 +139,9 @@ export default defineComponent({
 
     const computedTabsClass = computed(() => ({ 'va-tabs--vertical': props.vertical }))
 
+    const { getColor } = useColors()
+    const colorComputed = computed(() => getColor(props.color))
+
     const sliderStyles = computed(() => {
       if (props.hideSlider) {
         return { display: 'none' }
@@ -473,6 +475,10 @@ export default defineComponent({
         min-width: 100%;
       }
 
+      .va-tabs__tabs-items {
+        width: 100%;
+      }
+
       .va-tab {
         flex: 1 0 auto;
         max-width: none;