Text dissplayed in tooltips for long texts in columns "ressource" and "user"

the-last-pastafarian · the-last-pastafarian · commit 76702140170b · 2025-06-16T09:14:05.000+02:00
diff --git a/server/assets/css/app.css b/server/assets/css/app.css
@@ -308,28 +308,65 @@ nav {
 .tooltip {
   position: relative;
   display: inline-table;
+   
 }
 
-.tooltip .tooltiptext {
+.tooltiptext {
   visibility: hidden;
-  width:max-content;
-  background-color: #165f55;
-  color: #fff;
+  width: 1000px;
+  background-color: rgb(242, 248, 249);
   text-emphasis:unset;
-  text-align: center;
+  
   border-radius: 6px;
-  padding: 5px 0;
   position: absolute;
   z-index: 1;
-  bottom: 120%;
-  left: 5%;
-  margin-left: 2em;
+  margin-left: -12em;
+  margin-top:-1em;
   opacity: 0;
   transition: opacity 0.7s;
 }
 
+.tooltiptextleftcolumn {
+  text-align: left;
+}
+
+.tooltiptextrigthcolumn {
+  text-align: center;
+  transform: translate(-50%, 0%);
+}
+
 .tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
   padding: 1em;
+}
+
+.scrolldown {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.scrolldown thead , .scrolldown tbody {
+  display: block;
+}
+
+.scrolldown tbody tr, .scrolldown thead tr {
+  display: grid;
+  grid-template-columns: 1.2fr 0.6fr 1.2fr 1fr; 
+}
+
+.scrolldown thead {
+  color: #3f4246;
+  font-size: small;
+}
+
+.scrolldown tbody {
+  max-height: 100px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  color: #3f4246;
+  line-height: 0%;
+  font-size: small;
+  table-layout: fixed;
 }
diff --git a/server/lib/field_hub_web/live/project_show.ex b/server/lib/field_hub_web/live/project_show.ex
@@ -44,7 +44,7 @@ defmodule FieldHubWeb.Live.ProjectShow do
           |> assign(:confirm_project_name, "")
           |> assign(:delete_files, false)
           |> assign(:hide_cache_cleared_message, true)
-          |> assign(:n_changes_to_display, 5)
+          |> assign(:n_changes_to_display, 100)
           |> assign(:page_title, project)
           |> read_project_doc()
         }
diff --git a/server/lib/field_hub_web/live/project_show.html.heex b/server/lib/field_hub_web/live/project_show.html.heex
@@ -68,10 +68,10 @@
 
                 <section>
                   <tr>
-                    <td valign="top" class="column-last-changes-slider">
-                      <form id="last_changes_form" phx-change="change_count_select">
-                        Show the {@n_changes_to_display}<br /> last changes
-                        <div class="slider-container">
+                    <%!-- <td valign="top" class="column-last-changes-slider">
+                      <form id="last_changes_form" phx-change="change_count_select"> --%>
+                        <%!-- Show the {@n_changes_to_display}<br /> last changes --%>
+                        <%!-- <div class="slider-container">
                           <input
                             type="range"
                             min="2"
@@ -80,40 +80,57 @@
                             class="slider"
                             name="n-last-changes"
                           />
-                        </div>
-                      </form>
-                    </td>
-                    <td>
-                      <table>
-                        <tbody class="row-compact">
-                          <tr class="row-head">
+                        </div> --%>
+                      <%!-- </form>
+                    </td> --%>
+                    <%!-- <td> --%>
+                    <%!-- <td>
+                    10 changes <br />
+                    50 changes <br />
+                    100 changes <br />
+                    All changes <br />
+                    </td> --%>
+                    <td>History</td>
+                    <td>                       
+                    
+                      <table class="scrolldown">
+                        <thead>
+                          <tr>
                             <th>Ressource</th>
                             <th>Action</th>
                             <th>User</th>
                             <th>Time</th>
                           </tr>
-                          <%= for change <- last_n_changes do %>
-                            <% {type, date_time, user_name} =
-                              CouchService.extract_most_recent_change_info(change) %>
-                            <tr>  
-                              <td>'{change["doc"]["resource"]["identifier"]}'</td>
-                              <td>{type}</td>                             
-                              <td>
-                                <i>{ user_name  |>  String.slice(0..24) }</i>
-                                <div class="tooltip" :if={ String.length(user_name) > 24 } >
-                                ... 
-                                <span class="tooltiptext">{ user_name } </span>
-                                </div>
-                              </td>
-                              <td class="column-date-time">
-                                {Calendar.strftime(date_time, "%c")}
-                              </td>
-                            </tr>
-                          <% end %>
+                        </thead>
+                        <tbody>
+                            <%= for change <- last_n_changes do %>
+                              <% {type, date_time, user_name} =
+                                CouchService.extract_most_recent_change_info(change) %>
+                              <tr>                                
+                                <td>
+                                  { change["doc"]["resource"]["identifier"]  |>  String.slice(0..18) }
+                                  <div class="tooltip" :if={ String.length(change["doc"]["resource"]["identifier"]) > 18 } >
+                                  ... 
+                                  <span class="tooltiptext tooltiptextleftcolumn">{ change["doc"]["resource"]["identifier"] } </span>
+                                  </div>
+                                </td>
+                                <td>{type}</td>                             
+                                <td>
+                                  <i>{ user_name  |>  String.slice(0..18) }</i>
+                                  <div class="tooltip" :if={ String.length(user_name) > 18 } >
+                                  ... 
+                                  <span class="tooltiptext tooltiptextrigthcolumn">{ user_name } </span>
+                                  </div>
+                                </td>
+                                <td class="column-date-time">
+                                  {Calendar.strftime(date_time, "%c")}
+                                </td>
+                              </tr>
+                            <% end %>
                         </tbody>
-                      </table>
+                        </table>
                     </td>
-                  </tr>
+                  </tr>             
                 </section>
 
                 <section>

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ defmodule FieldHubWeb.Live.ProjectShow do`
`44`	`44`	`\|> assign(:confirm_project_name, "")`
`45`	`45`	`\|> assign(:delete_files, false)`
`46`	`46`	`\|> assign(:hide_cache_cleared_message, true)`
`47`		`- \|> assign(:n_changes_to_display, 5)`
	`47`	`+ \|> assign(:n_changes_to_display, 100)`
`48`	`48`	`\|> assign(:page_title, project)`
`49`	`49`	`\|> read_project_doc()`
`50`	`50`	`}`