diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss b/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss index 9795c7d1..6da7773b 100644 --- a/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss +++ b/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss @@ -147,7 +147,7 @@ } .info { - width: 72%; + width: 100%; a { width: 24%; @@ -163,33 +163,33 @@ } p { - width: 41%; + width: 25%; min-width: 180px; @include ellipsis; &:first-of-type { - width: 31%; + width: 18%; margin-left: 10px; } - &:nth-child(3), &:last-child { + &:nth-child(3), &:nth-child(4) { width: unset; } } } -.barChart { - width: 28%; -} - .bar { height: 13px; - width: 100%; + width: 28%; border-radius: 10px; margin-top: 12px; background-color: $medium-gray; overflow: hidden; + @media (max-width: $desktop) { + width: 21%; + } + .percentage { height: 13px; width: 60%; @@ -208,37 +208,29 @@ .hasTenant { .sortDropdown { - &:first-child { - width: 15%; - } + width: 15%; - &:nth-child(2) { - width: 15%; + &:nth-child(4), &:last-of-type { + p { + margin: 0 auto; + } } } .info { - a { - width: 20%; - } - p { - width: 20%; + width: 15%; min-width: unset; &.centered { text-align: center; } - - &:first-of-type { - width: 21%; - } - - &:last-child { - width: 15%; - } } } + + .bar { + width: 25%; + } } .link { diff --git a/src/dashboard/src/components/charts/allocationTable/TableRow.tsx b/src/dashboard/src/components/charts/allocationTable/TableRow.tsx index 05f209b7..6be3f0b4 100644 --- a/src/dashboard/src/components/charts/allocationTable/TableRow.tsx +++ b/src/dashboard/src/components/charts/allocationTable/TableRow.tsx @@ -57,8 +57,6 @@ export const TableRow: React.FC = ({

{availableValue}

- -
{/* Applying width as an inline style */}
diff --git a/src/dashboard/src/components/spinner/Spinner.module.scss b/src/dashboard/src/components/spinner/Spinner.module.scss index 27084a4c..1199dedc 100644 --- a/src/dashboard/src/components/spinner/Spinner.module.scss +++ b/src/dashboard/src/components/spinner/Spinner.module.scss @@ -1,23 +1,25 @@ @import '@/styles/utils.scss'; .spinner { - display: inline-block; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: rgba($chart-gray, 0.5); + display: flex; + justify-content: center; + align-items: center; position: absolute; - // width: 80px; - // height: 80px; -} -.spinner div { - box-sizing: border-box; - display: block; - position: absolute; - // width: 64px; - // height: 64px; - margin: 8px; - border: 8px solid $white; - border-radius: 50%; - animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: $white transparent transparent transparent; + >div { + width: 20px; + height: 20px; + border: 2px solid $bc-blue; + border-color: $bc-blue transparent transparent transparent; + border-radius: 50%; + position: absolute; + animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + } } .spinner div:nth-child(1) {