From 6bb370ad6cd639af530102e7e987182992f0c14f Mon Sep 17 00:00:00 2001
From: joaovictor3g <jvdias79797@gmail.com>
Date: Wed, 24 Apr 2024 11:16:38 -0300
Subject: [PATCH] fixes tabs to hd resolutions

---
 web/assets/css/styles.css               | 10 +++-
 web/assets/css/tabs.css                 | 71 ++++++++++++++++++++++---
 web/assets/js/utils/render-functions.js |  3 +-
 web/index.html                          |  6 ++-
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css
index dd2fbcd..7f8137f 100644
--- a/web/assets/css/styles.css
+++ b/web/assets/css/styles.css
@@ -258,7 +258,8 @@ a {
 
 /* Containers */
 .editor-container {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, calc(50% - 12px));
   /* 3 * 24px = 72px for padding, 72px for navbar, 32px for footer */
   height: calc(100vh - (3 * 24px) - 72px - 32px);
   gap: 24px;
@@ -298,6 +299,11 @@ a {
   align-items: center;
 }
 
+.editor__header.editor__tab {
+  display: grid;
+  grid-template-columns: 80% 20%;
+}
+
 .dark .editor__header {
   background: #25282c;
   border-bottom-color: #33373d;
@@ -386,6 +392,8 @@ a {
   font-size: 14px;
   line-height: 24px;
   height: 32px;
+  width: max-content;
+  justify-self: flex-end;
 }
 
 .dark .button {
diff --git a/web/assets/css/tabs.css b/web/assets/css/tabs.css
index d2eb88f..436495b 100644
--- a/web/assets/css/tabs.css
+++ b/web/assets/css/tabs.css
@@ -14,21 +14,35 @@
  * limitations under the License.
  */
 
-.tabs {
+#tab {
   --purple: #8447d1;
   --purple-dark: #ab75f0;
-  --tab-button-width: 150px;
+  --tab-button-width: 110px;
 
   display: flex;
+  align-items: center;
+}
+
+.tab__arrow::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+
+  border-left: 10px solid var(--purple);
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
   width: 100%;
-  flex: 1;
   align-items: center;
 }
 
 .tabs::after {
   content: "";
-  max-width: var(--tab-button-width);
-  width: 100%;
+  width: var(--tab-button-width);
   height: 2px;
 
   background-color: var(--purple);
@@ -42,7 +56,8 @@
 .tabs button {
   background-color: transparent;
   border: none;
-  width: var(--tab-button-width);
+  min-width: var(--tab-button-width);
+  position: relative;
 
   display: flex;
   flex-direction: column;
@@ -56,6 +71,12 @@
   cursor: pointer;
 }
 
+.tabs button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .dark .tabs button {
   color: white;
 }
@@ -82,3 +103,41 @@
 .dark .tabs button.active::after {
   background-color: var(--purple-dark);
 }
+
+@media (max-width: 1650px) {
+  #tab {
+    --tab-button-width: 90px;
+  }
+
+  .tabs button {
+    width: var(--tab-button-width);
+  }
+
+  .tabs button > span {
+    width: 70px;
+  }
+
+  .tabs::after {
+    width: var(--tab-button-width);
+    transform: translateX(calc(var(--current-tab) * var(--tab-button-width)));
+  }
+}
+
+@media (max-width: 1366px) {
+  #tab {
+    --tab-button-width: 70px;
+  }
+
+  .tabs button {
+    width: var(--tab-button-width);
+  }
+
+  .tabs button > span {
+    width: 50px;
+  }
+
+  .tabs::after {
+    width: var(--tab-button-width);
+    transform: translateX(calc(var(--current-tab) * var(--tab-button-width)));
+  }
+}
diff --git a/web/assets/js/utils/render-functions.js b/web/assets/js/utils/render-functions.js
index 18e8b06..b39c0fa 100644
--- a/web/assets/js/utils/render-functions.js
+++ b/web/assets/js/utils/render-functions.js
@@ -140,6 +140,7 @@ export function renderTabs(mode, examples) {
   divParent.className = "tabs";
   divParent.id = "tabs";
   divParent.setAttribute("data-tab-active", 0);
+  divParent.setAttribute("data-tab-length", tabs.length);
 
   document.querySelectorAll(dataEditorInputClassNames)?.forEach((editor) => {
     editor.remove();
@@ -157,7 +158,7 @@ export function renderTabs(mode, examples) {
     inputEditor.setValue(currentExample[containerId], -1);
 
     const tabButton = document.createElement("button");
-    tabButton.innerHTML = tab.name;
+    tabButton.innerHTML = `<span>${tab.name}</span>`;
     tabButton.className = "tabs-button";
 
     tabButton.onclick = () => {
diff --git a/web/index.html b/web/index.html
index e0178be..375a281 100644
--- a/web/index.html
+++ b/web/index.html
@@ -187,7 +187,10 @@
           </div>
           <div class="output-container">
             <div class="editor editor-input">
-              <div class="editor__header" style="position: relative">
+              <div
+                class="editor__header editor__tab"
+                style="position: relative"
+              >
                 <div style="display: flex; align-items: center; gap: 1rem">
                   <div class="tooltip__container">
                     <i id="tooltip__trigger" class="ph-fill ph-info icon"></i>
@@ -320,6 +323,7 @@ <h1 class="modal__title">Playground modes</h1>
     <script type="module" src="assets/js/services/examples.js"></script>
     <script type="module" src="assets/js/utils/localStorage.js"></script>
     <script type="module" src="assets/js/utils/render-functions.js"></script>
+    <script src="assets/js/components/tabs.js"></script>
     <script type="module" src="assets/js/main.js"></script>
     <script
       type="module"