🔛 Fix progress bar tooltip position

Author: TobseF

frontend/styles/shared-styles.css

@@ -29,7 +29,7 @@
 /* Tooltip text */
 .tooltip .tooltiptext {
     visibility: hidden;
-    width: 200px;
+    width: 110px;
     display: block;
 
     background-color: black;
@@ -42,15 +42,15 @@
     z-index: 1;
 
     top: 50px;
-    left: -100px;
+    left: -85px;
 }
 
 /* Tooltip Marker */
 .tooltip-bottom::after {
     content: "";
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    left: 85px;
 
     border-width: 5px;
     border-style: solid;

src/main/java/org/cleancode/journal/component/progressbar/GradeProgressBar.java

@@ -27,7 +27,7 @@ public ProgressDay(String tooltip) {
         }
 
         private void addToolTip(String tooltip) {
-            addClassName("tooltip");
+                        addClassName("tooltip");
             Span span = new Span(tooltip);
             span.addClassName("tooltiptext");
             span.addClassName("tooltip-bottom");

src/main/java/org/cleancode/journal/view/AboutView.java

@@ -2,6 +2,9 @@
 
 import com.vaadin.flow.component.Composite;
 import com.vaadin.flow.component.Html;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
@@ -15,7 +18,16 @@
 public class AboutView extends Composite<VerticalLayout> {
 
     public AboutView(Profile profile, IGradeService gradeService, IAchievementService achievementService) {
+
         var content = getContent();
+
+        HorizontalLayout line = new HorizontalLayout();
+        line.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
+        line.add(new Button("A"));
+        line.add(new Button("B"));
+        line.setSizeFull();
+        content.add(line);
+
         content.add(new Html(getTranslation("about.info")));
         content.add(new Html(getTranslation("about.info.technical")));
         content.add(new Html(getTranslation("about.info.tanks")));