Skip to content

Fix(app/frontend): jump in card overflow issues #7679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Ceebug wants to merge 3 commits into from
Closed

Fix(app/frontend): jump in card overflow issues #7679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c8319d
Update grid template columns for responsiveness
Ceebug Sep 23, 2026
fd83e5a
Merge branch 'modrinth:main' into servercardoverflowfix
Ceebug Sep 23, 2026
28fd925
Enhance layout with min-w-0 and truncate classes
Ceebug Sep 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ onUnmounted(() => {
<style scoped lang="scss">
.grid-when-huge {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(670px, 100%), 1fr));
}

.jump-back-in-item {
Expand Down
20 changes: 10 additions & 10 deletions apps/app-frontend/src/components/ui/world/WorldItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -492,8 +492,8 @@ function openContextMenu(event: MouseEvent) {
no-shadow
class="!rounded-[14px]"
/>
<div class="flex flex-col justify-center gap-0.5 h-full">
<div class="flex items-center gap-1.5">
<div class="flex flex-col justify-center gap-0.5 h-full min-w-0">
<div class="flex items-center gap-1.5 min-w-0">
<div class="text-base text-contrast font-semibold truncate">
{{ getWorldDisplayName(world) }}
</div>
Expand Down Expand Up @@ -527,7 +527,7 @@ function openContextMenu(event: MouseEvent) {
</div>
<div
v-else-if="world.type === 'server'"
class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap min-w-0 truncate"

@IMB11 IMB11 Oct 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to use the truncate.ts we have in packages/ui if text is truncated to show a tooltip on hover

@Ceebug Ceebug Oct 27, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ive spent 4 hours trying to get this working, i have followed the example exactly to the best of my ability. i still have not gotten it working :(
may i pls ask for some help from u guys

>
<template v-if="refreshing">
<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
Expand All @@ -548,9 +548,9 @@ function openContextMenu(event: MouseEvent) {
stroke-width="3px"
class="shrink-0 smart-clickable:allow-pointer-events"
/>
<Tooltip :disabled="!hasPlayersTooltip">
<Tooltip :disabled="!hasPlayersTooltip" class="min-w-0 truncate">
<span
class="smart-clickable:allow-pointer-events"
class="smart-clickable:allow-pointer-events min-w-0 truncate"
:class="{ 'cursor-help': hasPlayersTooltip }"
>
{{
Expand All @@ -571,15 +571,15 @@ function openContextMenu(event: MouseEvent) {
</template>
<template v-else>
<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
{{ formatMessage(messages.offline) }}
<span class="truncate">{{ formatMessage(messages.offline) }}</span>
</template>
</div>
</div>
<div class="flex items-center gap-1.5 text-sm text-secondary">
<div class="flex items-center gap-1.5 text-sm text-secondary min-w-0">
<template v-if="instanceId">
<router-link
data-no-card-click
class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events min-w-0"
:to="`/instance/${instanceId}`"
>
<Avatar
Expand Down Expand Up @@ -622,10 +622,10 @@ function openContextMenu(event: MouseEvent) {
class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
v-html="renderedMotd"
/>
<div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
<div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5 truncate max-w-full">
{{ formatMessage(messages.cantConnect) }}
</div>
<div v-else class="font-normal font-minecraft text-secondary leading-5">
<div v-else class="font-normal font-minecraft text-secondary leading-5 truncate max-w-full">
{{ formatMessage(messages.aMinecraftServer) }}
</div>
</template>
Expand Down
Loading