feat: “Expand” the UI to take full advantage of the screen

[MIfoodie]

This is a little mock-up I did of where you could resize and reposition UI elements to make better use of the screen

I hope it’s not too messy :) 🖍️

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

[ayoayco]

One accessibility consideration here. Expanding the status/post card will mean more characters to read per line. There's an optimum number of characters per line that we keep to make it easy on the eyes to read.

[patak-dev]

There have been several others asking for this. We can leave it open for people to discuss but I think it is a really hard feature to implement and maintain. The issue is that the current layout for posts expects you to have a width of 600px (or a bit less). Expansions, attachments, polls, and other features are implemented with this in mind. I think a possible way to keep this simple would be to allow for wider posts (let's say 1200px), and then when there is a post card use two columns with the card on the right and the post text on the left. I don't know how good this would look but at least it is something that feels doable.

[MIfoodie]

I found this extension thing that uses the whole screen for mastodon and it looks pretty nice. https://codeberg.org/Freeplay/Mastodon-Modern

[ayoayco]

I think this should also be left for user-land solutions like a browser extension 😄

[bhcompy]

Guess there's no movement on this? Kind of looks comical on a 1440p monitor. It's so sad and lonely with all that padding

[Christopher-Hayes]

I don't think it's unreasonable to want to use that space for sidebars and other content, but expanding the posts to be basically fullscreen would definitely harm readability, not to mention WCAG. This might not be obvious on a smaller laptop screen, but on 1440p this would be a serious problem.

For example, this is how it would look on 1440p:

However, if Elk goes through a redesign, a slightly wider post layout could still totally work, just probably not fullscreen. This would likely need larger font sizes and padding to make it all work. Elk is already using rem on fonts, so font-size on larger screens could be tweaked pretty easily, for example:

[bhcompy]

I understand what you're saying, but I happen to like it. I mean I guess I can use tampermonkey to fix it, as I've found or created solutions for other sites that have the same limitations. Choice is nice. Luckily, browsers aren't completely constrained

[nileshtrivedi]

Whalebird has a Slack/Discord like interface which is really great, but it works for them because Whalebird is a desktop-only client.

I am interested in showing the Followed Hashtags in the Elk sidebar if on large screens (again, like Slack/Discord):

This might work as a tampermonkey script:

const nav = document.querySelector('nav');
const topics = ['elk', 'mozilla'];
const hashtagsLink = nav.querySelector('a[href="/hashtags"]');

if (hashtagsLink) {
  topics.forEach(text => {
    const a = document.createElement('a');
    a.href = "#";
    a.addEventListener('click', function(){
      window.useNuxtApp().$router.push(`/fosstodon.org/tags/${text.toLowerCase()}`);
    });
    a.className = "";

    a.innerHTML = `
<div class="v-popper v-popper--theme-tooltip">
  <div class="item w-fit rounded-3 px2 mx3 sm:mxa transition-100 elk-group-hover-bg-active group-focus-visible:ring-2 group-focus-visible:ring-current" flex="" items-center="" gap4="" xl="ml0 mr5 px5 w-auto">
              <div class="i-ri:hashtag" text-xl=""></div>
              <span block="" sm:hidden="" xl:block="" select-none="">${text}</span>
  </div>
</div>
`;
    hashtagsLink.insertAdjacentElement('afterend', a);
  });
};

[nileshtrivedi]

I implemented the above feature (followed hashtags in the sidebar for Slack/Discord-like topic-wise browsing/discovery) and in Whalebird desktop client and love it! Would love to see this implemented in Elk too.