@peculiar/certificates-viewer 3.10.0 → 3.10.1-alpha.14

package/dist/collection/components/certificates-viewer/certificates-viewer.css

@@ -1,349 +1,622 @@
-:host {
+* {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+  font-family: var(--pv-font-family, inherit);
 }
-:host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+
+/**
+ * Typography variants.
+ */
+.t-h1 {
+  font-weight: var(--pv-text-h1-weight);
+  font-size: var(--pv-text-h1-size);
+  line-height: var(--pv-text-h1-height);
+  letter-spacing: var(--pv-text-h1-spacing);
 }
 
-:host {
-  display: block;
-  width: 100%;
-  word-wrap: break-word;
-  min-width: 280px;
-  overflow: auto;
-  position: relative;
-  background: white;
-  background: rgba(var(--pv-color-light-rgb), 1);
+.t-h2 {
+  font-weight: var(--pv-text-h2-weight);
+  font-size: var(--pv-text-h2-size);
+  line-height: var(--pv-text-h2-height);
+  letter-spacing: var(--pv-text-h2-spacing);
 }
 
-table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border-spacing: 0;
+.t-h3 {
+  font-weight: var(--pv-text-h3-weight);
+  font-size: var(--pv-text-h3-size);
+  line-height: var(--pv-text-h3-height);
+  letter-spacing: var(--pv-text-h3-spacing);
 }
 
-table thead {
-  background-color: rgba(53, 132, 247, 0.07);
-  background-color: rgba(var(--pv-color-primary-rgb), 0.07);
+.t-h4 {
+  font-weight: var(--pv-text-h4-weight);
+  font-size: var(--pv-text-h4-size);
+  line-height: var(--pv-text-h4-height);
+  letter-spacing: var(--pv-text-h4-spacing);
 }
 
-table tr td {
-  vertical-align: middle;
+.t-h5 {
+  font-weight: var(--pv-text-h5-weight);
+  font-size: var(--pv-text-h5-size);
+  line-height: var(--pv-text-h5-height);
+  letter-spacing: var(--pv-text-h5-spacing);
 }
 
-table tbody tr:not(.expanded_summary) {
-  cursor: pointer;
+.t-s1 {
+  font-weight: var(--pv-text-s1-weight);
+  font-size: var(--pv-text-s1-size);
+  line-height: var(--pv-text-s1-height);
+  letter-spacing: var(--pv-text-s1-spacing);
 }
 
-table tr {
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
+.t-s2 {
+  font-weight: var(--pv-text-s2-weight);
+  font-size: var(--pv-text-s2-size);
+  line-height: var(--pv-text-s2-height);
+  letter-spacing: var(--pv-text-s2-spacing);
 }
 
-table th {
-  padding: 15px 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
+.t-b1 {
+  font-weight: var(--pv-text-b1-weight);
+  font-size: var(--pv-text-b1-size);
+  line-height: var(--pv-text-b1-height);
+  letter-spacing: var(--pv-text-b1-spacing);
 }
 
-table td {
-  padding: 8px 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
+.t-b2 {
+  font-weight: var(--pv-text-b2-weight);
+  font-size: var(--pv-text-b2-size);
+  line-height: var(--pv-text-b2-height);
+  letter-spacing: var(--pv-text-b2-spacing);
 }
 
-/* For col 4 */
-table .col_issuer,
-table .col_name,
-table .col_public_key {
-  width: 16%;
+.t-b3 {
+  font-weight: var(--pv-text-b3-weight);
+  font-size: var(--pv-text-b3-size);
+  line-height: var(--pv-text-b3-height);
+  letter-spacing: var(--pv-text-b3-spacing);
 }
 
-table .col_actions,
-table .col_tests {
-  width: 18%;
+.t-btn1 {
+  font-weight: var(--pv-text-btn1-weight);
+  font-size: var(--pv-text-btn1-size);
+  line-height: var(--pv-text-btn1-height);
+  letter-spacing: var(--pv-text-btn1-spacing);
 }
 
-/* For col extra */
-table.m_extra .col_issuer,
-table.m_extra .col_name,
-table.m_extra .col_public_key {
-  width: 12%;
+.t-btn2 {
+  font-weight: var(--pv-text-btn2-weight);
+  font-size: var(--pv-text-btn2-size);
+  line-height: var(--pv-text-btn2-height);
+  letter-spacing: var(--pv-text-btn2-spacing);
 }
 
-table.m_extra .col_actions,
-table.m_extra .col_tests {
-  width: 17%;
+.t-c1 {
+  font-weight: var(--pv-text-c1-weight);
+  font-size: var(--pv-text-c1-size);
+  line-height: var(--pv-text-c1-height);
+  letter-spacing: var(--pv-text-c1-spacing);
 }
 
-/* Expande rows styles */
-/* First row */
-table tr.expanded td:not(:last-child) {
-  border-right-color: transparent;
+.t-c2 {
+  font-weight: var(--pv-text-c2-weight);
+  font-size: var(--pv-text-c2-size);
+  line-height: var(--pv-text-c2-height);
+  letter-spacing: var(--pv-text-c2-spacing);
 }
 
-table tr.expanded td {
-  border-bottom-color: transparent;
+/**
+ *
+ */
+/**
+ * Color variants.
+ */
+.c-primary-tint-5 {
+  --pv-color-base: var(--pv-color-primary-tint-5);
 }
 
-.expanded {
-  border-bottom-color: transparent;
-  background-color: rgba(53, 132, 247, 0.04);
-  background-color: rgba(var(--pv-color-primary-rgb), 0.04);
+.c-primary-tint-4 {
+  --pv-color-base: var(--pv-color-primary-tint-4);
 }
 
-table tr.expanded_summary {
-  background-color: rgba(53, 132, 247, 0.04);
-  background-color: rgba(var(--pv-color-primary-rgb), 0.04);
+.c-primary-tint-3 {
+  --pv-color-base: var(--pv-color-primary-tint-3);
 }
 
-/* Second row */
-table tr.expanded_summary td {
-  vertical-align: top;
-  padding: 10px 20px 26px;
+.c-primary-tint-2 {
+  --pv-color-base: var(--pv-color-primary-tint-2);
 }
 
-@keyframes fadeIn {
-  0% {
-    opacity: 0.001;
-  }
-  100% {
-    opacity: 1;
-  }
+.c-primary-tint-1 {
+  --pv-color-base: var(--pv-color-primary-tint-1);
 }
-.modal_wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  overflow: auto;
-  text-align: center;
-  animation: fadeIn 200ms;
-  padding: 30px 10px;
+
+.c-primary {
+  --pv-color-base: var(--pv-color-primary);
 }
-.modal_wrapper:before {
-  display: inline-block;
-  vertical-align: middle;
-  width: 0;
-  height: 100%;
-  content: "";
+
+.c-primary-shade-1 {
+  --pv-color-base: var(--pv-color-primary-shade-1);
 }
 
-.modal_backdrop {
-  background: rgba(42, 49, 52, 0.5);
-  background: rgba(var(--pv-color-dark-rgb), 0.5);
-  z-index: -1;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.c-primary-shade-2 {
+  --pv-color-base: var(--pv-color-primary-shade-2);
 }
 
-.modal_container {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  width: 100%;
-  max-width: 900px;
-  text-align: left;
-  border-radius: 3px;
-  overflow: hidden;
-  background-color: white;
-  background-color: rgba(var(--pv-color-light-rgb), 1);
-  height: 100%;
+.c-primary-shade-3 {
+  --pv-color-base: var(--pv-color-primary-shade-3);
 }
 
-.modal_title {
-  background-color: rgba(53, 132, 247, 0.07);
-  background-color: rgba(var(--pv-color-primary-rgb), 0.07);
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  padding: 20px 60px 16px 20px;
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: 60px;
+.c-primary-shade-4 {
+  --pv-color-base: var(--pv-color-primary-shade-4);
 }
 
-.modal_content {
-  height: calc(100% - 60px);
-  overflow-y: auto;
+.c-primary-shade-5 {
+  --pv-color-base: var(--pv-color-primary-shade-5);
+}
+
+.c-primary-contrast {
+  --pv-color-base: var(--pv-color-primary-contrast);
+}
+
+.c-secondary-tint-5 {
+  --pv-color-base: var(--pv-color-secondary-tint-5);
+}
+
+.c-secondary-tint-4 {
+  --pv-color-base: var(--pv-color-secondary-tint-4);
+}
+
+.c-secondary-tint-3 {
+  --pv-color-base: var(--pv-color-secondary-tint-3);
+}
+
+.c-secondary-tint-2 {
+  --pv-color-base: var(--pv-color-secondary-tint-2);
+}
+
+.c-secondary-tint-1 {
+  --pv-color-base: var(--pv-color-secondary-tint-1);
+}
+
+.c-secondary {
+  --pv-color-base: var(--pv-color-secondary);
+}
+
+.c-secondary-shade-1 {
+  --pv-color-base: var(--pv-color-secondary-shade-1);
+}
+
+.c-secondary-shade-2 {
+  --pv-color-base: var(--pv-color-secondary-shade-2);
+}
+
+.c-secondary-shade-3 {
+  --pv-color-base: var(--pv-color-secondary-shade-3);
+}
+
+.c-secondary-shade-4 {
+  --pv-color-base: var(--pv-color-secondary-shade-4);
+}
+
+.c-secondary-shade-5 {
+  --pv-color-base: var(--pv-color-secondary-shade-5);
+}
+
+.c-secondary-contrast {
+  --pv-color-base: var(--pv-color-secondary-contrast);
+}
+
+.c-wrong-tint-5 {
+  --pv-color-base: var(--pv-color-wrong-tint-5);
+}
+
+.c-wrong-tint-4 {
+  --pv-color-base: var(--pv-color-wrong-tint-4);
+}
+
+.c-wrong-tint-3 {
+  --pv-color-base: var(--pv-color-wrong-tint-3);
+}
+
+.c-wrong-tint-2 {
+  --pv-color-base: var(--pv-color-wrong-tint-2);
+}
+
+.c-wrong-tint-1 {
+  --pv-color-base: var(--pv-color-wrong-tint-1);
+}
+
+.c-wrong {
+  --pv-color-base: var(--pv-color-wrong);
+}
+
+.c-wrong-shade-1 {
+  --pv-color-base: var(--pv-color-wrong-shade-1);
+}
+
+.c-wrong-shade-2 {
+  --pv-color-base: var(--pv-color-wrong-shade-2);
+}
+
+.c-wrong-shade-3 {
+  --pv-color-base: var(--pv-color-wrong-shade-3);
+}
+
+.c-wrong-shade-4 {
+  --pv-color-base: var(--pv-color-wrong-shade-4);
+}
+
+.c-wrong-shade-5 {
+  --pv-color-base: var(--pv-color-wrong-shade-5);
+}
+
+.c-wrong-contrast {
+  --pv-color-base: var(--pv-color-wrong-contrast);
+}
+
+.c-attention-tint-5 {
+  --pv-color-base: var(--pv-color-attention-tint-5);
+}
+
+.c-attention-tint-4 {
+  --pv-color-base: var(--pv-color-attention-tint-4);
+}
+
+.c-attention-tint-3 {
+  --pv-color-base: var(--pv-color-attention-tint-3);
+}
+
+.c-attention-tint-2 {
+  --pv-color-base: var(--pv-color-attention-tint-2);
+}
+
+.c-attention-tint-1 {
+  --pv-color-base: var(--pv-color-attention-tint-1);
+}
+
+.c-attention {
+  --pv-color-base: var(--pv-color-attention);
+}
+
+.c-attention-shade-1 {
+  --pv-color-base: var(--pv-color-attention-shade-1);
+}
+
+.c-attention-shade-2 {
+  --pv-color-base: var(--pv-color-attention-shade-2);
+}
+
+.c-attention-shade-3 {
+  --pv-color-base: var(--pv-color-attention-shade-3);
+}
+
+.c-attention-shade-4 {
+  --pv-color-base: var(--pv-color-attention-shade-4);
+}
+
+.c-attention-shade-5 {
+  --pv-color-base: var(--pv-color-attention-shade-5);
+}
+
+.c-success-tint-5 {
+  --pv-color-base: var(--pv-color-success-tint-5);
+}
+
+.c-success-tint-4 {
+  --pv-color-base: var(--pv-color-success-tint-4);
+}
+
+.c-success-tint-3 {
+  --pv-color-base: var(--pv-color-success-tint-3);
+}
+
+.c-success-tint-2 {
+  --pv-color-base: var(--pv-color-success-tint-2);
 }
 
-.modal_close {
+.c-success-tint-1 {
+  --pv-color-base: var(--pv-color-success-tint-1);
+}
+
+.c-success {
+  --pv-color-base: var(--pv-color-success);
+}
+
+.c-success-shade-1 {
+  --pv-color-base: var(--pv-color-success-shade-1);
+}
+
+.c-success-shade-2 {
+  --pv-color-base: var(--pv-color-success-shade-2);
+}
+
+.c-success-shade-3 {
+  --pv-color-base: var(--pv-color-success-shade-3);
+}
+
+.c-success-shade-4 {
+  --pv-color-base: var(--pv-color-success-shade-4);
+}
+
+.c-success-shade-5 {
+  --pv-color-base: var(--pv-color-success-shade-5);
+}
+
+.c-black {
+  --pv-color-base: var(--pv-color-black);
+}
+
+.c-gray-10 {
+  --pv-color-base: var(--pv-color-gray-10);
+}
+
+.c-gray-9 {
+  --pv-color-base: var(--pv-color-gray-9);
+}
+
+.c-gray-8 {
+  --pv-color-base: var(--pv-color-gray-8);
+}
+
+.c-gray-7 {
+  --pv-color-base: var(--pv-color-gray-7);
+}
+
+.c-gray-6 {
+  --pv-color-base: var(--pv-color-gray-6);
+}
+
+.c-gray-5 {
+  --pv-color-base: var(--pv-color-gray-5);
+}
+
+.c-gray-4 {
+  --pv-color-base: var(--pv-color-gray-4);
+}
+
+.c-gray-3 {
+  --pv-color-base: var(--pv-color-gray-3);
+}
+
+.c-gray-2 {
+  --pv-color-base: var(--pv-color-gray-2);
+}
+
+.c-gray-1 {
+  --pv-color-base: var(--pv-color-gray-1);
+}
+
+.c-white {
+  --pv-color-base: var(--pv-color-white);
+}
+
+.c-extra-1 {
+  --pv-color-base: var(--pv-color-extra-1);
+}
+
+.c-extra-2 {
+  --pv-color-base: var(--pv-color-extra-2);
+}
+
+/**
+ *
+ */
+.typography {
+  color: var(--pv-color-base);
+}
+
+.button {
+  display: inline-flex;
   cursor: pointer;
+  background: transparent;
   border: none;
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: 0 12px;
-  transition: opacity 100ms;
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;
   outline: none;
+  font-family: inherit;
+  border-radius: 4px;
+  height: var(--pv-size-base-6);
+  min-width: var(--pv-size-base-6);
+  padding: 0 var(--pv-size-base-2);
+  transition: background-color 200ms ease 0s;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pv-size-base-2);
+  font-size: 0;
 }
-.modal_close:hover {
-  opacity: 0.6;
+.button.m_no_padding {
+  padding: 0;
 }
-.modal_close svg {
-  fill: #2a3134;
-  fill: rgba(var(--pv-color-dark-rgb), 1);
+.button:hover {
+  background-color: var(--pv-color-gray-3);
 }
-
-.button_table_action {
-  margin: 2px;
+.button:focus {
+  background-color: var(--pv-color-gray-4);
 }
-
-/* Adaptivity styles */
-.mobile_title {
-  display: none;
+.button:active {
+  background-color: var(--pv-color-gray-5);
 }
 
-/* Empty state */
-.status_wrapper {
-  height: 85px;
-  text-align: center;
-  pointer-events: none;
+:host {
+  display: block;
+  width: 100%;
+  word-wrap: break-word;
+  min-width: 280px;
+  overflow: auto;
+  position: relative;
 }
 
-/* Search */
 .search_section {
-  background-color: rgba(53, 132, 247, 0.07);
-  background-color: rgba(var(--pv-color-primary-rgb), 0.07);
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
-  height: 50px;
-  padding: 10px;
-  border-width: 1px 1px 0 1px;
-  border-style: solid;
+  padding: var(--pv-size-base-4);
+  border-bottom: 1px solid var(--pv-color-gray-4);
 }
 
 .input_search {
-  height: 100%;
+  height: var(--pv-size-base-8);
   width: 100%;
-  border-radius: 3px;
-  border-width: 1px;
-  border-style: solid;
-  padding: 0 14px;
-  font-size: 12px;
   outline: none;
-  border-color: #d1d5d9;
-  border-color: rgba(var(--pv-color-grey_3-rgb), 1);
-  color: #2a3134;
-  color: rgba(var(--pv-color-dark-rgb), 1);
+  background-color: var(--pv-color-gray-1);
+  padding: 0 var(--pv-size-base-2);
+  border: 1px solid var(--pv-color-gray-7);
+  border-radius: 4px;
+  transition: background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;
 }
 .input_search::placeholder {
-  color: #d1d5d9;
-  color: rgba(var(--pv-color-grey_3-rgb), 1);
+  color: var(--pv-color-gray-9);
+}
+
+table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+table td, table th {
+  border-bottom: 1px solid var(--pv-color-gray-4);
+  vertical-align: top;
+  text-align: left;
+}
+table td:first-child, table th:first-child {
+  padding-right: 0;
+  width: var(--pv-size-base-10);
+}
+table td:last-child, table th:last-child {
+  padding-left: 0;
+  width: var(--pv-size-base-10);
+}
+table th {
+  padding: var(--pv-size-base-2) var(--pv-size-base-4);
+}
+table th.col_action {
+  padding: 0;
+}
+table td {
+  padding: var(--pv-size-base-4);
+}
+table tr.m_expanded {
+  background: var(--pv-color-gray-1);
+}
+table tr.m_expanded > td {
+  border-bottom: none;
+}
+table tr.expanded_summary {
+  background: var(--pv-color-gray-1);
+}
+table tr.expanded_summary table {
+  table-layout: initial;
+}
+table tr.expanded_summary table td {
+  border-bottom: none;
+  padding: var(--pv-size-base-2);
+}
+table tr.expanded_summary table td:first-child {
+  width: 200px;
+}
+table tr.expanded_summary table td:last-child {
+  width: auto;
+}
+
+.button_table_cell {
+  margin-top: -3px;
+}
+
+.status_wrapper {
+  text-align: center;
+  height: var(--pv-size-base-16);
+  vertical-align: middle;
 }
 
-.loading_container {
-  position: absolute;
+.modal_wrapper {
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(42, 49, 52, 0.3);
-  background: rgba(var(--pv-color-dark-rgb), 0.3);
+  z-index: 1;
+  animation: fadeIn 200ms;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
-.align_center {
-  text-align: center;
+.modal_backdrop {
+  background: var(--pv-color-black);
+  z-index: -1;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
 }
 
-@media (hover: hover) {
-  table tbody tr:not(.expanded_summary):hover {
-    background-color: rgba(53, 132, 247, 0.04);
-    background-color: rgba(var(--pv-color-primary-rgb), 0.04);
-  }
-}
-@media (max-width: 900px) {
-  table, tbody, tr, td {
-    display: block;
-  }
-
-  thead {
-    display: none;
-  }
-
-  tr {
-    padding: 0 15px;
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  tr:not(:first-child) {
-    margin-top: -1px;
-  }
-
-  tr:not(.expanded_summary) td:first-child {
-    border: none !important;
-  }
-
-  table td {
-    padding-left: 0;
-    padding-right: 0;
-    border-width: 1px 0 0 0 !important;
-    border-color: rgba(209, 213, 217, 0.5);
-    border-color: rgba(var(--pv-color-grey_3-rgb), 0.5);
-  }
-
-  table tr.expanded_summary td {
-    padding: 15px 0;
-  }
-
-  .mobile_title {
-    display: inline-block;
-    width: 90px;
-    vertical-align: middle;
-  }
-
-  .modal_title {
-    padding: 17px 60px 17px 15px;
-  }
-
-  .content {
-    display: inline-block;
-    width: calc(100% - 90px);
-    vertical-align: middle;
-    text-align: left;
-  }
-
-  .expanded_summary {
-    border-top-color: transparent;
-    padding-bottom: 10px;
-  }
-
-  .expanded_summary td:before {
-    content: none;
-  }
-
-  /* Empty state */
-  .status_wrapper {
-    height: 266px;
-    display: table-cell;
-  }
-
-  /* Search */
-  .search_section {
-    height: 60px;
-    padding: 15px;
-  }
-
-  .align_center {
-    text-align: inherit;
-  }
+.modal_container {
+  background: var(--pv-color-white);
+  width: 100%;
+  display: flex;
+  max-height: calc(100% - 60px);
+  flex-direction: column;
+  margin: var(--pv-size-base-6);
+  position: relative;
+  outline: none;
+  box-shadow: var(--pv-shadow-dark-hight);
+  overflow: hidden;
+  border: 0px;
+  padding: 0px;
+  max-width: 640px;
+  border-radius: 4px;
+}
+
+.modal_header {
+  padding: var(--pv-size-base-3) var(--pv-size-base-4);
+  display: flex;
+  flex: 0 0 auto;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  gap: var(--pv-size-base-2);
+  border-bottom: 1px solid var(--pv-color-gray-5);
+}
+
+.modal_content {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+:host([data-mobile-screen-view=true]) table, :host([data-mobile-screen-view=true]) tbody, :host([data-mobile-screen-view=true]) tr, :host([data-mobile-screen-view=true]) td {
+  display: block;
+  width: 100% !important;
+  padding: 0;
+  border: none;
+}
+:host([data-mobile-screen-view=true]) thead {
+  display: none;
+}
+:host([data-mobile-screen-view=true]) table tr {
+  padding: var(--pv-size-base-2) 0;
+}
+:host([data-mobile-screen-view=true]) table .expanded_summary {
+  padding: 0;
+}
+:host([data-mobile-screen-view=true]) table .certificate_row {
+  border-bottom: 1px solid var(--pv-color-gray-5);
+  padding: var(--pv-size-base-2) var(--pv-size-base-4);
+}
+:host([data-mobile-screen-view=true]) table .certificate_row_actions {
+  padding-top: var(--pv-size-base-6);
+}
+:host([data-mobile-screen-view=true]) table .certificate_row_actions td {
+  display: flex;
+  justify-content: right;
+  gap: var(--pv-size-base-4);
+}
+:host([data-mobile-screen-view=true]) .button_table_cell {
+  margin-top: 0;
 }