DiscussionList Positioning Ain't Right

Subarist

I think you should avoid changing font size on hover
font-size: 22px !important;

User31

Subarist Alright. Why's that?

Subarist

User31 Hover effects should avoid using changes that alter spacing, such as changes in font size, as they can often cause layout shifts. In your example, the title font size changes from 20px to 22px on hover, which compresses the space and causes layout tweaks. This is what I observed.

User31

Subarist
Yeah, does make sense.

I removed all font-size: #px; earlier.
There was no change though.

Suspect it may possibly be related to this:

.container {
    margin-left: 0px;
    margin-right: 0px;
    width: auto;
    transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out, width 0.3s ease-in-out;
}

Subarist

I'm not sure, but with your current setup, your website looks pretty normal. Right now, I'm not sure what tweaks you're referring to.

User31

Subarist Really?
Aren't you seeing any abnormal behavior on the 'All Discussions' page?
(*please ignore the weird coloring, it's just to help me with identifying resulting frontend changes)

On the 'All Discussions' page, I'm seeing the main body is slightly off center (left), in addition, when hovering over any listed discussions, this results with the whole Discussion List page awkwardly jerking further off center and slightly zooming out.

There are several other issues too.
Eg: it's impossible to select any frontend admin options for the listed Discussions, ie: I can't select any options from the drop-down panel coz it's like the drop-down panel is merely an illusion. Basically rather than opening any selected drop-down options like edit tags, rename, lock, sticky, etc, instead whatever was behind the panel opens, with that typically being a Discussion thread.

EDIT: I've tried dozens of ways to get 7 different coding AIs to have a go at fixing these codes....😂yet every single time the result has been even worse.

Subarist

User31

/* remove the "DiscussionListItem-conten:hover，,hover should not be set here
/* .DiscussionListItem-content:hover {
   /*  transition: all .2s ease-in-out;
  /*  transform: scale(1.03);
/*     color: gold !important;
/*     background: linear-gradient(130deg, #f00, #0c3, #60c, #c60, #0c3, #60c, #c60, #0c3, #60c);
/* background-size: 1800% 1800%;
 /*    animation: rainbow 20s ease infinite;~~
/* }

/* Should be set in DiscussionListItem:hover
.DiscussionListItem:hover {
    transform: scale(1.02);
    color: gold !important;
    background: linear-gradient(130deg, #f00, #0c3, #60c, #c60, #0c3, #60c, #c60, #0c3, #60c);
    background-size: 1800% 1800%;
    animation: rainbow 20s ease infinite;
z-index: 999;  /* <-- The drop-down menu display during hover can be improved.
}

/* no needed
  /*  --discussion-list-item-bg-hover: #f6f6f6;

Using AI to optimize too much flarum's CSS at once can be a disaster, and it will be difficult for you to find out what happened.

User31

Subarist Using AI to optimize too much flarum's CSS at once can be a disaster, and it will be difficult for you to find out what happened.

Well I'm sorry Subarist...🤭but... how dare you speak ill of our future overlords!
As a good citizen I am now required to report the presence of your divergent programming to the Central AI.

[...whips out digital equivalent of a gЯape whistle, hitting a big red button alerting Central AI officials]

Now while we wait for the friendly neighborhood slaughterbot agents to arrive and apprehend you. I'll have you know GTP's seemingly infinite pseudo-"optimism" is just so bloody contagious I.... find it irresistible the way they blissfully churn out their endless streams of cleverly contorted [OpenAI™ brand] equine excrement pseudo-"answers".

Silly question I know, but how could I, or anyone ever resist AI's rancid pseudo-"charm" by not allowing them to mutilate our Flarum™ CSS at every opportunity? No answer huh. Yeah that's right. Everyone knows it's impossible....🤭

User31

Subarist Thanks for trying to help out with this.

You've definitely helped improve the situation. And I do appreciate this.

Unfortunately the initial OP issue with the weird off centered zoomage, still persists.

😅 To top it off...

User31

///FOR REFERENCE///
@Subarist provided a solution for the weird zoomy hover issue (in a separate thread here), as follows:

.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
}

This fixed the zoom thing.

However the DLIST has now reverted back to being an anorexic ho...pless case all over again.

🤣And apparently there's at least 1 known blimmin' gott dang feral side nav still on the loose again too.

//EDIT: Reorganized the DLIST modules a little.
Here's where it's at right now:

/*(((i(((BODY))))))*/

/*((( BODY((( BACKGROUND )))*/
body {
    background-image: url("https://asylum.flarum.cloud/assets/files/2024-08-10/1723247283-465702-compress-20240810-114658-8089.jpg?auto-compress&cs=tinysrgb&w=1260&h=750&dpr=2") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/*(((i(((BODY))))))*/




/*(((ii(((ROOT))))))*/

/*((( ROOT((( BORDER-RADIUS((( DLIST((( TITLE-COLOR )))*/
:root {
    --border-radius: 6px;
    --discussion-title-color: white;
}
/*(((ii(((ROOT))))))*/




/*(((iii(((CONTAINER))))))*/

/*((( CONTAINER )))*/
.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
}
/*(((iii(((CONTAINER))))))*/




/*(((iv(((TOOLBARS))))))*/

/*((( TOOLBARS((( INDEX-PAGE((( TAGS-PAGE((( NONE )))*/
.IndexPage-toolbar,
.TagsPage-toolbar {
    display: none;
}
/*(((iv(((TOOLBARS))))))*/




/*(((v(((DISCUSSION-LIST)))DLIST))))))*/

/*((( DLIST((( ITEM-CONTENT )))*/
.DiscussionListItem-content {
    color: white;
    font-weight: 800;
    font-size: 23px;
    font-family: "Font Awesome 5 Free", Garamond, serif;
    font-variant: small-caps;
    text-shadow: 0 0 3px black;
    background: rgba(129, 0, 255, 0.3);
}

/*((( DLIST((( ITEM-CONTENT((( KEYFRAMES((( RAINBOW )))*/
@keyframes rainbow {
    0% {background-position: 0% 62%;}
    50% {background-position: 80% 19%;}
    100% {background-position: 0% 62%;}
}

/*((( DLIST((( ITEM )))*/
.DiscussionListItem {
    color: white;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

/*((( DLIST((( ITEM((( HOVER )))*/
.DiscussionListItem:hover {
    transform: scale(1.02);
    color: gold !important;
    background: linear-gradient(130deg, #f00, #0c3, #60c, #c60, #0c3, #60c, #c60, #0c3, #60c);
    background-size: 1800% 1800%;
    animation: rainbow 20s ease infinite;
    z-index: 999; 
}

/*((( DLIST((( ITEM-TITLE )))*/
.DiscussionListItem-title {
    color: white;
    font-weight: 900;
    font-variant: small-caps;
    font-family: Garamond, serif;
    font-size: 22px;
}

/*((( DLIST((( ITEM-TITLE((( HOVER )))*/
.DiscussionListItem-title:hover {
    color: gold !important;
}

/*((( MEDIA((( PHONE((( DLIST((( ITEM-TITLE )))*/
@media (max-width: 767.98px) @phone {
    .DiscussionListItem-title {
        color: white;
        font-weight: 900;
        font-variant: small-caps;
        font-family: Garamond, serif;
        font-size: 22px;
        transition: color 0.3s ease-in-out;
    }

    /*((( MEDIA((( PHONE((( DLIST((( ITEM-TITLE((( HOVER )))*/
    .DiscussionListItem-title:hover {
        color: gold !important;
    }
}

/*((( DLIST((( ITEM-INFO )))*/
.DiscussionListItem-info {
    color: white;
    font-variant: small-caps;
    font-family: Garamond, serif;
    font-size: 12px;
    transition: color 0.3s ease-in-out;
}

/*((( DLIST((( ITEM-INFO((( HOVER )))*/
.DiscussionListItem-info:hover {
    color: gold !important;
}

/*((( DLIST((( ITEM-AUTHOR((( AVATAR )))*/
.DiscussionListItem-author .Avatar {
    filter: drop-shadow(0 0 5px white);
    transition: filter 0.3s ease-in-out;
}

/*((( DLIST((( ITEM-AUTHOR((( AVATAR((( HOVER )))*/
.DiscussionListItem-author .Avatar:hover {
    filter: drop-shadow(0 0 10px gold);
}

/*((( DLIST((( ITEM-INFO((( USERNAME )))*/
.DiscussionListItem-info .username {
    color: white;
    font-variant: small-caps;
    font-family: Garamond, serif;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 0 4px black;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

/*((( DLIST((( ITEM-INFO((( USERNAME((( HOVER )))*/
.DiscussionListItem-info .username:hover {
    color: gold !important;
}

/*((( DLIST((( LOAD-MORE-BUTTON )))*/
.DiscussionList-loadMore button {
    width: 95%;
    border-radius: 5px;
    background: linear-gradient(130deg, #6600cc, #cc6600, #00cc33);
    color: gold;
    font-variant: small-caps;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-family: Garamond, serif;
    text-shadow: 0 0 6px black;
    background-size: 1800% 1800%;
    animation: rainbow 35s ease infinite;
}

/*((( DLIST((( LOAD-MORE-BUTTON((( KEY-FRAMES((( RAINBOW )))*/
@keyframes rainbow {
    0% {background-position: 0% 62%;}
    50% {background-position: 80% 19%;}
    100% {background-position: 0% 62%;}
}
/*(((v(((DISCUSSION-LIST)))DLIST))))))*/

//EDIT #2: I've managed to track down where the feral side nav is hiding out.

🤔Looks like a well fed class 6 chaotic neutral persistent pain in the hiney.

Probably why the anorexic DLIST is looking so gaunt and malnourished.

Best we put an end to it's reign of side navigable terror quick smart, before the other nav bars start getting any feral ideas.

//EDIT #3: Just for clarity.

The OP issue is referring to fixing the zoomy weirdness for the full-width-of-the-screen sized DiscussionList discussions.
The recently discovered feral side-nav ain't supposed to exist.
The legendary Subarist resolved the zoomy weirdness.
But now the DiscussionList size is waaaaaay off.

User31

//CASE CLOSED//

Turns out @Subarist already solved this issue a while ago in another thread.

The answer?

😂Add:
width: 1200px;
...to the .container

Didn't exactly fit my usage case, so I've adjusted it to width: 90%; instead.

Subarist

User31
Since screen sizes are getting larger, I've gotten into the habit of setting a fixed maximum width. Using a percentage is, of course, an option, but when using large displays, it can make reading uncomfortable for most users, causing them to lose focus. This is why all major websites tend to impose a certain limit on the width of the main display area.

User31

Subarist

🤔... wait, so does that mean we can actually force the full width Desktop view on all devices & screen sizes?
Because that would be awesome!

I initially tried using the exact CSS solution you'd previouly provided, ie: .container along with: width: 1200px;, however this specific configuration resulted with a return of the weird zoomy thing. So I first resorted to trying various px widths, without success. Ultimately moving on to trying width percentages and finding that anything over 91% results with the zoomy thing, thus I've currently settled on 90% width—simply as it seems to be the best solution at the moment.
😅 I'm definitely all ears if anyone has a superior solution (?)

And again, thanks for your help with all this mind boggling stuff, as well as for your patience too. Really is appreciated.