'External link' and 'image' icons are too similar

[remram44]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

When scrolling, I want to expand images by clicking on them, but sometimes I am taken to a completely different site because it was an external link.

This happens because the two icons are WAY too similar to easily tell apart, especially since they are overlaid on the post's image.

I recommend either putting the external/image icon outside of the post's image or at least make them more different (perhaps different colors?)

Steps to Reproduce

1. Browse lemmy
2. Click on images to expand them
3. Sooner or later you'll mess up and end up loading a completely different site, from which you might not be able to easily come back (back button is unreliable nowadays)

Technical Details

Mostly a problem on phones where the icon is a couple millimeters wide, but also on desktop.

Lemmy Instance Version

Footer says BE: 0.19.3

Lemmy Instance URL

https://lemmy.ml

[remram44]

Here's my workaround userscript, which disables clicks on thumbnails entirely if not expanding:

// ==UserScript==
// @name         Fix links on Lemmy
// @namespace    http://tampermonkey.net/
// @version      2024-04-12
// @description  Disables clicks on all thumbnails except the ones that will expand, preventing unwanted navigation
// @author       You
// @match        https://lemmy.ml/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lemmy.ml
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let interval;

    function fixOne(elem) {
        elem.removeAttribute('href');
        elem.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); });
    }

    function fixList(elems) {
        if(elems.length > 0) {
            clearInterval(interval);
            [].forEach.call(elems, fixOne);
        }
    }

    function doit() {
        fixList(document.querySelectorAll('a.text-body'));
        fixList(document.querySelectorAll('a.thumbnail'));
    }

    interval = setInterval(doit, 2000);
})();