[Omniscient]

In Convo since some css updates and other alterations it seems some space is created on the left side.

Reward of 10,000 Bytes to first person who can give me the fix.

Relevant css files...

https://hackforums.net/cache/themes/theme12/convo_8.css
https://hackforums.net/cache/themes/them...sponse.css
https://hackforums.net/cache/themes/theme12/global.css (likely not the problem)

[7]

global.css
.wrapper-content {
width: 100%;
max-width: 1525px;
margin: auto;
opacity: 85%;
z-index:-1;
}

previously
.wrapper-content {
width: 95%;
max-width: 1525px;
margin: auto;
opacity: 85%;
z-index:-1;
}



Same with thread content..

[Omniscient]

here's userscript that fixes it:

Code

// ==UserScript==
// @name         ✅ Fix Uneven Left Margin on HackForums
// @namespace    https://hackforums.net/
// @version      2.0
// @description  Fully removes left space on #panel by overriding bad width calculation from global.css
// @author       m0hx
// @match        https://hackforums.net/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";

  GM_addStyle(`
    #panel {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
      max-width: none !important;
    }

    body, html {
      margin: 0 !important;
      padding: 0 !important;
    }

    .wrapper, .wrapper-content {
      width: 100% !important;
      margin: 0 auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  `);
})();

gpt:
After reanalyzing your global.css, this spacing issue is most likely due to this line in your current layout:


#panel {
width: calc(95% - 50px);
}


This subtracts 50px only from the left, effectively shifting the entire panel to the right, creating that space.

-----------

gpt2:
The issue stems from this CSS rule in global.css:

Code

#panel {
    width: calc(95% - 50px);
}

This line subtracts 50px from the total width, which effectively pushes the layout away from the left side only and breaks centering. It's not offset evenly on both sides.

Please update the #panel style to this:

Code

#panel {
    width: 95%;
    margin: 0 auto;
    max-width: 1525px;
}

Or, even better:

Code

#panel {
    width: 100%;
    max-width: 1525px;
    margin: 0 auto;
}

Can the fix be in response.css or convo.css for an @?

[Omniscient]

Tested

#panel {
width: 100%;
max-width: 1525px;
margin: 0 auto;
}

That doesn't seem to make any change to convo. Because the issue is only in convo, I have to believe it's inside that css (or maybe response.css).

The panel isn't even shown in mobile view.

[7]

Before



After

[Omniscient]

global.css
.wrapper-content {
width: 100%;
max-width: 1525px;
margin: auto;
opacity: 85%;
z-index:-1;
}



Makes no change to Convo.


EDIT: I take it back, that does seem to matter. Let me try it live file.

[7]

I personally dont think the gap is required.. Looks cleaner without

[7]

global.css
.wrapper-content {
width: 100%;
max-width: 1525px;
margin: auto;
opacity: 85%;
z-index:-1;
}



Makes no change to Convo.


EDIT: I take it back, that does seem to matter. Let me try it live file.

[7]

Mobile UX/UI dont usually have a padding for background anyway imho..
Give the bytes away.. im just trying to help

[Omniscient]

7 that fixed it, thanks...sending you 10k Bytes.


And I do recall that css being altered when I was changing theme elements. I think I took the existing 95% that was in .wrapper but yeah, it should be 100%.

If anyone seems a problem from the change LMK. Else it's back to looking normal imho.

Thanks to all. Appreciate it.

[7]

No problem ... Jump in convo... Guys it's yours anyway

[7]

Everyone in convo 10 winners of 1k..
I dont need the bytes...

[Clumsy]

In Convo since some css updates and other alterations it seems some space is created on the left side.

Reward of 10,000 Bytes to first person who can give me the fix.

Relevant css files...

https://hackforums.net/cache/themes/theme12/convo_8.css
https://hackforums.net/cache/themes/them...sponse.css
https://hackforums.net/cache/themes/theme12/global.css (likely not the problem)

Code

https://pastebin.com/raw/9VXxAb1p

---

umm in global theres a directory traversal https://hackforums.net/images/backgrounds/

view-source:https://hackforums.net/cache/themes/theme12/global.css here on line 481

---

In Convo since some css updates and other alterations it seems some space is created on the left side.

Reward of 10,000 Bytes to first person who can give me the fix.

Relevant css files...

https://hackforums.net/cache/themes/theme12/convo_8.css
https://hackforums.net/cache/themes/them...sponse.css
https://hackforums.net/cache/themes/theme12/global.css (likely not the problem)

Code

/* --- Your Original Structure with Fixes Applied --- */

/* Button Styles */
.viewCoinChartsButton:hover > span {
    background-color: #35353b !important;
}

/* 3D Button */
.pro-adv-3d-button {
    box-shadow: 0 2px 0 #000000a8;
    padding: 10px 12px;
    margin: 0 3px;
    appearance: none;
    background-color: #1f1f1f;
    font-weight: bold;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pro-adv-3d-button:active,
.pro-adv-3d-button-active {
    box-shadow: none;
    position: relative;
    top: 2px;
    background-color: #111 !important;
    cursor: default;
}

.pro-adv-3d-button:hover:not(.pro-adv-3d-button-active) {
    background-color: #2b2b2b;
}

/* Graph Time Selection */
.coin-graph-time {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 12px;
    color: #969696;
    box-sizing: border-box;
    height: 24px;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.coin-graph-time:hover:not(.coin-graph-time-active) {
    background-color: #2b2b2f;
}

.coin-graph-time-active {
    background-color: #3c3c42;
    color: #efefef;
    cursor: default;
}

/* Chart Display */
.chartjs-coingraph {
    display: none !important;
}

.chartjs-coingraph-active {
    display: block !important;
}

/* Sidebar */
.userlist-sidebar {
    width: 200px;
    min-width: 200px;
    background-color: #292929;
    position: relative;
}

.userlist-sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #111 #222;
    height: 100%;
    overflow-y: auto;
}

.userlist-sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
    border-radius: 4px;
    background: #222;
}

.userlist-sidebar-wrapper::-webkit-scrollbar-thumb {
    background: #111;
    border-radius: 4px;
}

.userlist-sidebar-wrapper:hover::-webkit-scrollbar-thumb {
    background: #111;
}

/* Sidebar Header */
.us-header {
    display: flex;
    justify-content: flex-end;
    font-weight: 600;
    color: #eee;
    font-size: 16px;
    align-items: center;
    padding: 8px 12px 0 0;
}

.us-header-hide {
    padding: 5px 18px;
    display: none;
    cursor: pointer;
    border-radius: 6px;
    margin-left: 4px;
}

.us-header-hide:hover {
    background-color: #313131;
}

/* User List */
.us-group {
    display: flex;
    height: 34px;
    align-items: center;
}

.us-group > span {
    font-weight: 600;
    color: #9e9e9e;
    font-size: 13px;
    letter-spacing: 0.4px;
    margin-left: 14px;
}

.us-user {
    display: flex;
    margin: 2px 5px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}

.us-user:hover {
    background-color: #313131;
}

.us-user:hover .us-user-avatarContainer > img {
    filter: brightness(1.1);
}

.us-user-left {
    display: flex;
    flex: 0 0 32px;
    justify-content: flex-end;
    align-items: center;
}

.us-user-avatarContainer {
    height: 32px;
}

.us-user-avatarContainer > img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.us-user-right {
    display: flex;
    align-items: center;
    margin-left: 11px;
    font-size: 16px;
    word-break: break-word;
}

.us-user-right > span,
.us-user-right > strong {
    font-weight: 500;
}

.us-mir-pcard {
    bottom: initial !important;
    left: initial !important;
    right: 194px !important;
}

/* Additional sections truncated due to length; will continue in follow-up update */

[Omniscient]

Clumsy What does that mean there is a directory traversal in the css?

I have intentionally allowed the images in the directory because eventually I'll make them chooseable backgrounds.

https://hackforums.net/images/backgrounds/

There are a few image folders on HF I have done this with...

https://hackforums.net/uploads/awards/

https://hackforums.net/images/groupimages/custom/

A little Easter Egg I suppose.

[6]

Clumsy What does that mean there is a directory traversal in the css?

I have intentionally allowed the images in the directory because eventually I'll make them chooseable backgrounds.

https://hackforums.net/images/backgrounds/

There are a few image folders on HF I have done this with...

https://hackforums.net/uploads/awards/

https://hackforums.net/images/groupimages/custom/

A little Easter Egg I suppose.

Nice image listing, nostalgia there