Frontend: Fixed left/right out of bound tooltip.

frontend/src/lib/components/pill.svelte

@@ -18,6 +18,7 @@
   let pill_arrow;
   let pill_tooltip;
   let main_pill;
+  let innerWidth;
 
   if (shadow_color === null) {
     style = `background-color: ${color};
@@ -28,22 +29,34 @@
   }
 
   function showingTooltip(visible) {
+    // Showing tooltip
+    const isOutofBoundLeft=(main_pill.offsetLeft+(main_pill.offsetWidth/2)<(pill_tooltip.offsetWidth/2));
+    const isOutofBoundRight=((pill_tooltip.offsetLeft+pill_tooltip.offsetWidth)>innerWidth);
     if (visible && tooltip_data.length > 0) {
       pill_tooltip.style.visibility = "visible";
       pill_arrow.style.visibility = "visible";
-      // adjusting top
+      if(isOutofBoundLeft)
+      {
+        pill_tooltip.style.left = "0";
+      }
+      if(isOutofBoundRight)
+      {
+        pill_tooltip.style.right = "0";
+      }
       pill_tooltip.style.top = `${
         main_pill.offsetTop - pill_tooltip.offsetHeight - 16
       }px`;
-      pill_tooltip.style.boxShadow = `0px 8px 18px -1px #261C2C30`;
+    }
-      pill_arrow.style.filter = `drop-shadow(0px 8px 18px #261C2C20)`;
+    // Hiding tooltip
-    } else {
+    else {
       pill_tooltip.style.visibility = "hidden";
       pill_arrow.style.visibility = "hidden";
     }
   }
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div
   class={white ? "pill-container pill-white" : "pill-container pill-black"}
   {style}
@@ -59,7 +72,7 @@
     <div class="pill-tooltip" bind:this={pill_tooltip}>
       {#each tooltip_data as td}
         <div>
-          <p>{td.title}</p>
+          <span>{td.title}</span>
           <div class="pill-last">
             <button
               class="pill-view"

frontend/src/lib/css/pill.css

@@ -53,11 +53,13 @@
     justify-content: center;
     visibility: hidden;
     transition: all .3s ease 0s;
-    box-shadow: none;
+    box-shadow: 0px 8px 18px -1px #261C2C30;
     display: flex;
     flex-direction: column;
     padding-left: 1rem;
     padding-right: 1rem;
+    height: fit-content;
+    width: fit-content;
 }
 
 .pill-tooltip>div {
@@ -66,6 +68,13 @@
     align-items: center;
 }
 
+.pill-tooltip span {
+    margin-top: 0.9rem;
+    margin-bottom: 0.9rem;
+    margin-right: 0.5rem;
+    white-space: nowrap;
+}
+
 .pill-tooltip svg {
     margin: 0 !important;
     padding: 0 !important;
@@ -114,5 +123,5 @@
     border-top: 20px solid var(--color-background);
     visibility: hidden;
     transition: all .3s ease 0s;
-    filter: none;
+    filter: drop-shadow(0px 8px 18px #261C2C20);
 }

frontend/src/lib/css/project-popup.css

@@ -59,6 +59,32 @@
         flex-direction: row;
         align-items: center;
     }
+
+    .project-popup-close {
+        min-width: 2.2rem;
+        min-height: 2.2rem;
+        background-color: var(--color-background);
+        color: var(--color-text);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 0;
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+        cursor: pointer;
+    }
+
+    .project-popup-subtitle {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 500;
+        font-size: 1.1rem;
+        width: 100%;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
 }
 
 @media screen and (max-width: 1000px) {
@@ -127,6 +153,32 @@
     .project-popup-tag-container {
         margin-bottom: 3rem !important;
     }
+
+    .project-popup-close {
+        min-width: 2.2rem;
+        min-height: 2.2rem;
+        background-color: #ffffff00;
+        color: var(--color-text);
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 0;
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+        cursor: pointer;
+    }
+
+    .project-popup-subtitle {
+        color: var(--color-text);
+        font-family: 'Gabarito', sans-serif;
+        font-weight: 500;
+        font-size: 1rem;
+        width: 100%;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
 }
 
 .project-popup-link-container {
@@ -146,22 +198,6 @@
     visibility: hidden;
 }
 
-.project-popup-close {
-    min-width: 2.2rem;
-    min-height: 2.2rem;
-    background-color: var(--color-background);
-    color: var(--color-text);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 0;
-    position: absolute;
-    right: 0.5rem;
-    top: 0.5rem;
-    cursor: pointer;
-}
-
 .project-popup-close:hover {
     background-color: var(--color-special);
     color: var(--color-background);
@@ -190,16 +226,6 @@
     text-align: justify;
 }
 
-.project-popup-subtitle {
-    color: var(--color-text);
-    font-family: 'Gabarito', sans-serif;
-    font-weight: 500;
-    font-size: 1.1rem;
-    width: 100%;
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-}
-
 .project-popup-download {
     padding: 0.4rem;
     margin-right: 0.75rem;