fix [dev-9566] table columns sizing (#1601)

* fix dev-9566 table columns sizing * fixed the font sizing
CDCgov · Oct 22, 2024 · 5b6c885 · 5b6c885
1 parent 163b309
commit 5b6c885
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 37 deletions.
diff --git a/packages/core/components/DataTable/components/SortIcon/sort-icon.css b/packages/core/components/DataTable/components/SortIcon/sort-icon.css
@@ -1,21 +1,21 @@
 /* format the white triangle sort icon in data table headers */
 .sort-icon {
  fill: white;
- width: 15px;
- height: 20px;
- float: right;
  position: relative;
+ margin: 0 0.5rem !important;
  :is(svg) {
  position: absolute;
  fill: rgba(255, 255, 255, 0.5);
  &.active {
  fill: white;
  }
+ width: 1rem;
+ height: 1rem;
  }
  .up {
- top: 0;
+ bottom: 0.5rem;
  }
  .down {
- bottom: 0;
+ top: 0.5rem;
  }
 }
diff --git a/packages/core/components/DataTable/data-table.css b/packages/core/components/DataTable/data-table.css
@@ -1,3 +1,8 @@
+.table {
+ width: unset;
+ min-width: 100%;
+}
+
 .collapsed + .table-container {
  border-bottom: none;
 }
@@ -40,13 +45,10 @@ table.horizontal {
 
 table.data-table {
  margin-bottom: 0;
- min-width: 100%;
  background: #fff;
  position: relative;
  border: none;
- overflow-x: auto;
  border-collapse: collapse;
- overflow: auto;
  appearance: none;
  table-layout: fixed;
  * {
@@ -105,12 +107,6 @@ table.data-table {
  }
  }
 
- tbody {
- tr {
- width: 100%;
- }
- }
-
  tr {
  &.row-group {
  background-color: var(--tertiary) !important;
@@ -128,28 +124,14 @@ table.data-table {
  padding: 0.3em 0.7em;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
  &:last-child {
  border-right: 0 !important;
  }
-
- @media (max-width: var(--breakpoint-sm)) {
- font-size: var(--font-small) + 0.2em;
- }
- }
- tr {
- & > * {
- width: 100%;
- }
- }
- th {
- flex-grow: 1;
+ font-size: var(--font-size);
  }
 
  td {
  position: relative;
- flex-grow: 1;
  svg {
  margin-left: 1rem;
  }

diff --git a/packages/core/styles/_global-variables.scss b/packages/core/styles/_global-variables.scss
@@ -69,17 +69,25 @@ $colors: (
  @each $key, $value in $colors {
  --#{$key}: #{$value};
  }
- --editorWidth: 350px;
+ }
+}
 
- --font-small: 0.7em;
+@include theme();
 
- --breakpoint-xs: 480px;
- --breakpoint-sm: 768px;
- --breakpoint-md: 960px;
- --breakpoint-lg: 1170px;
- --breakpoint-xl: 1280px;
+:root {
+ --editorWidth: 350px;
+ --breakpoint-xs: 480px;
+ --breakpoint-sm: 768px;
+ --breakpoint-md: 960px;
+ --breakpoint-lg: 1170px;
+ --breakpoint-xl: 1280px;
+ --font-size: 17px;
+}
 
+
+@media (max-width: 768px) {
+ :root {
+ --font-size: 0.9em;
  }
 }
 
-@include theme();