fix: responsible tables (#11)

aziontech · Jun 4, 2024 · 22ea50d · 22ea50d
1 parent d417b9c
commit 22ea50d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 36 deletions.
diff --git a/src/azion-dark/extended-components/_markdown.scss b/src/azion-dark/extended-components/_markdown.scss
@@ -8,41 +8,52 @@
  }
 
  *:is(table) {
- border-collapse: separate !important;
- border-spacing: .5px !important;
- box-sizing: content-box !important;
- border: 1px solid var(--surface-border) !important;
- border-radius: 6px !important;
- overflow: hidden !important;
+ border-collapse: separate;
+ border-spacing: .5px;
+ box-sizing: content-box;
+ border: 1px solid var(--surface-border);
+ border-radius: 6px;
+ overflow: hidden;
  }
 
  *:is(table > thead) {
- border-collapse: separate !important;
- background: #1c1c1c !important;
+ border-collapse: separate;
+ background: #1c1c1c;
  }
 
  *:is(tr > th) {
- background: #1c1c1c !important;
+ background: #1c1c1c;
  }
 
  *:is(tr > th) {
- font-size: .875rem !important;
- text-wrap: nowrap !important;
- color: var(--text-color) !important;
- font-weight: 600 !important;
- text-align: left !important;
+ font-size: .875rem;
+ text-wrap: nowrap;
+ color: var(--text-color);
+ font-weight: 600;
+ text-align: left;
  padding: 1rem !important;
- background: #1c1c1c !important;
+ background: #1c1c1c;
  }
 
  *:is(tr > td) {
  font-size: .875rem;
- color: var(--text-color) !important;
+ color: var(--text-color);
  padding: 1rem !important;
- border-top: 1px solid var(--surface-border) !important;
- background: var(--surface-section) !important;
+ border-top: 1px solid var(--surface-border);
+ background: var(--surface-section);
  }
 
+ @media screen and (max-width: 640px) {
+ table {
+ display: block;
+ width: 100%;
+ overflow-x: scroll;
+ }
+ table td {
+ white-space: nowrap;
+ }
+ } 
+
  *:is(p), *:is(li) {
  color: var(--text-color-secondary) !important;
  }

diff --git a/src/azion-light/extended-components/_markdown.scss b/src/azion-light/extended-components/_markdown.scss
@@ -8,41 +8,52 @@
  }
 
  *:is(table) {
- border-collapse: separate !important;
- border-spacing: .5px !important;
- box-sizing: content-box !important;
- border: 1px solid var(--surface-border) !important;
- border-radius: 6px !important;
- overflow: hidden !important;
+ border-collapse: separate;
+ border-spacing: .5px;
+ box-sizing: content-box;
+ border: 1px solid var(--surface-border);
+ border-radius: 6px;
+ overflow: hidden;
  }
 
  *:is(table > thead) {
- border-collapse: separate !important;
- background: #e7e7e7 !important;
+ border-collapse: separate;
+ background: #e7e7e7;
  }
 
  *:is(tr > th) {
- background: #e7e7e7 !important;
+ background: #e7e7e7;
  }
 
  *:is(tr > th) {
- font-size: .875rem !important;
- text-wrap: nowrap !important;
- color: var(--text-color) !important;
- font-weight: 600 !important;
- text-align: left !important;
+ font-size: .875rem;
+ text-wrap: nowrap;
+ color: var(--text-color);
+ font-weight: 600;
+ text-align: left;
  padding: 1rem !important;
- background: #e7e7e7 !important;
+ background: #e7e7e7;
  }
 
  *:is(tr > td) {
  font-size: .875rem;
- color: var(--text-color) !important;
+ color: var(--text-color);
  padding: 1rem !important;
- border-top: 1px solid var(--surface-border) !important;
- background: var(--surface-section) !important;
+ border-top: 1px solid var(--surface-border);
+ background: var(--surface-section);
  }
 
+ @media screen and (max-width: 640px) {
+ table {
+ display: block;
+ width: 100%;
+ overflow-x: scroll;
+ }
+ table td {
+ white-space: nowrap;
+ }
+ } 
+
  *:is(p), *:is(li) {
  color: var(--text-color-secondary) !important;
  }