[feat] images: show resolution inside the image and fix image details overflow

Co-authored-by: Markus Heiser <markus.heiser@darmarit.de>

searx/static/themes/simple/src/less/detail.less

@@ -67,7 +67,10 @@ article.result-images .detail {
     p {
       color: var(--color-result-detail-label-font);
       font-size: 0.9rem;
-      line-height: 0.9rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin: 0.8rem 0;
 
       span {
         display: inline-block;

searx/static/themes/simple/src/less/style.less

@@ -464,6 +464,17 @@ article[data-vim-selected].category-social {
     background: var(--color-result-image-background);
   }
 
+  .image_resolution {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 50%);
+    padding: 0.3rem 0.5rem;
+    font-size: 0.9rem;
+    color: #fff;
+    border-top-left-radius: 0.3rem;
+  }
+
   span.title,
   span.source {
     display: block;

searx/templates/simple/result_templates/images.html

@@ -1,11 +1,9 @@
 <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
         <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
                 <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
-                <span class="title">{{ result.title|striptags }}</span>{{- "" -}}
-                <span class="source">
-                  {{- result.parsed_url.netloc -}}
-                  {%- if result.resolution %} - {{ result.resolution }}{%- endif -%}
-                </span>{{- "" -}}
+		{%- if result.resolution %} <span class="image_resolution">{{ result.resolution }}</span> {%- endif -%}
+		<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
+                <span class="source">{{- result.parsed_url.netloc -}}</span>{{- "" -}}
         </a>{{- "" -}}
         <div class="detail">{{- "" -}}
                 <a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}