improve mobile image zooming

Author: Gnkalk

searx/static/themes/smart/css/ltr-style.css

@@ -1104,6 +1104,7 @@ body.nord {
 
 .image-details-container .image-details .image img {
   object-fit: contain;
+  touch-action: pinch-zoom;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -1985,8 +1986,10 @@ body .body-container {
   display: flex;
 }
 
-#index:has(#suggestion button) > main {
-  justify-content: flex-start;
+@media (width <= 56rem) {
+  #index:has(#suggestion button) > main {
+    justify-content: flex-start;
+  }
 }
 
 main:has(.not-found) {

searx/static/themes/smart/css/rtl-style.css

@@ -1050,6 +1050,7 @@ body.nord {
 
 .image-details-container .image-details .image img {
   object-fit: contain;
+  touch-action: pinch-zoom;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -1931,8 +1932,10 @@ body .body-container {
   display: flex;
 }
 
-#index:has(#suggestion button) > main {
-  justify-content: flex-start;
+@media (width <= 56rem) {
+  #index:has(#suggestion button) > main {
+    justify-content: flex-start;
+  }
 }
 
 main:has(.not-found) {

searx/static/themes/smart/src/scss/results/images.scss

@@ -124,6 +124,7 @@
                 position: absolute;
                 top: 0;
                 left: 0;
+                touch-action: pinch-zoom;
 
                 &#preview-img {
                     filter: blur(10px);

searx/static/themes/smart/src/scss/style.scss

@@ -149,8 +149,10 @@ body {
     }
 }
 
-#index:has(#suggestion button)>main {
-    justify-content: flex-start;
+@include mixin.max-screens($screen-md) {
+    #index:has(#suggestion button)>main {
+        justify-content: flex-start;
+    }
 }
 
 // 404 page