From 8f158c41c306422d7bb84047a6ad28871fecadb8 Mon Sep 17 00:00:00 2001
From: Edan Bainglass <edan.bainglass@gmail.com>
Date: Sat, 11 Jan 2025 06:12:01 +0000
Subject: [PATCH] Update structure panel styles

---
 .../components/viewer/structure/structure.py  |  2 ++
 src/aiidalab_qe/app/static/styles/results.css |  2 ++
 .../app/static/styles/structure.css           | 35 +++++++++++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 src/aiidalab_qe/app/static/styles/structure.css

diff --git a/src/aiidalab_qe/app/result/components/viewer/structure/structure.py b/src/aiidalab_qe/app/result/components/viewer/structure/structure.py
index b83550c27..cf6fe9278 100644
--- a/src/aiidalab_qe/app/result/components/viewer/structure/structure.py
+++ b/src/aiidalab_qe/app/result/components/viewer/structure/structure.py
@@ -25,6 +25,8 @@ def _render(self):
         self.widget.configuration_box.selected_index = 2  # select the Cell tab
 
         self.atom_coordinates_table = TableWidget()
+        self.atom_coordinates_table.add_class("atom-coordinates-table")
+
         self._generate_table(structure.get_ase())
 
         structure_info = self._get_structure_info(structure)
diff --git a/src/aiidalab_qe/app/static/styles/results.css b/src/aiidalab_qe/app/static/styles/results.css
index be790bce8..8ec3d0b32 100644
--- a/src/aiidalab_qe/app/static/styles/results.css
+++ b/src/aiidalab_qe/app/static/styles/results.css
@@ -2,10 +2,12 @@
   display: flex;
   margin: 10px auto;
 }
+
 .results-step-toggles div {
   display: flex;
   column-gap: 8px;
 }
+
 .results-step-toggles i {
   margin-left: 4px;
 }
diff --git a/src/aiidalab_qe/app/static/styles/structure.css b/src/aiidalab_qe/app/static/styles/structure.css
new file mode 100644
index 000000000..11ce63a7d
--- /dev/null
+++ b/src/aiidalab_qe/app/static/styles/structure.css
@@ -0,0 +1,35 @@
+/* Structure manager */
+
+.structure-viewer .view-box {
+  justify-content: center !important;
+}
+
+/* Structure coordinates table */
+
+.atom-coordinates-table > div {
+  width: fit-content;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.atom-coordinates-table table {
+  width: 100% !important;
+}
+
+.atom-coordinates-table table tr:first-child {
+  background-color: #ccc !important;
+}
+
+.atom-coordinates-table table tr:not(:first-child):hover {
+  background-color: #ddd !important;
+}
+
+.atom-coordinates-table table tr:not(:first-child):active {
+  background-color: #ccc !important;
+}
+
+.atom-coordinates-table table th,
+.atom-coordinates-table table td {
+  text-align: center !important;
+  padding: 0.5em 1em !important;
+}