/* ============================================================================
hodl-mobile.css — WARSTWA TELEFONOWA (agent „Mobile", 2026-08-25)
----------------------------------------------------------------------------
WŁAŚCICIEL: agent `claude/mobile`. Nikt inny tu nie pisze.
ZASADY, KTÓRE CZYNIĄ TEN PLIK BEZPIECZNYM:
1. WYŁĄCZNIE reguły wewnątrz @media (max-width: …). Ani jednej reguły
globalnej — desktop ma zostać bajt w bajt taki, jaki jest.
2. Plik ładuje się jako OSTATNI arkusz w parent.html, więc wygrywa
kolejnością. NIE potrzebujesz `!important` do przebijania modułów —
używaj go tylko tam, gdzie przebijasz styl inline albo bibliotekę.
3. Zero zmian w szablonach i w CSS modułów. Czego nie da się zrobić stąd,
trafia na listę „wymaga zmiany markupu" w raporcie, a NIE do kodu.
Sekcje układaj per moduł, w kolejności ważności. Każda sekcja: nagłówek
z nazwą modułu, jednozdaniowe uzasadnienie decyzji i użyte breakpointy.
============================================================================ */
/* ============================================================================
⚠️ USTALENIE Z ROZPOZNANIA (agent Mobile, 2026-08-25) — WAŻNE PRZY SCALANIU
----------------------------------------------------------------------------
Brief zakładał, że ten plik „wygrywa kolejnością", bo jest ostatnim arkuszem
w . To PRAWDA tylko dla stron bez własnego CSS modułu. W praktyce
moduły ładują swoje arkusze WEWNĄTRZ {% block content %} (portfolio.html:5,
predictions.html:5, my_coin.html:11, review.html:6 …), czyli w — a więc
PO tym pliku w kolejności dokumentu. Przy równej specyficzności wygrywa moduł.
Dlatego reguły przebijające CSS modułu mają tu prefiks `body` (albo powtórzoną
klasę). To podbija specyficzność o jeden element i wystarcza, żeby wygrać —
bez `!important`. `!important` zostaje wyłącznie na style inline i biblioteki
(wykresy, Bootstrap), zgodnie z briefem.
============================================================================ */
/* ============================================================================
BREAKPOINTY — jeden zestaw w całym pliku
----------------------------------------------------------------------------
≤ 991.98px tablety i telefony (ten sam próg, na którym responsive-mobile.css
włącza dolny pasek nawigacji — celowo nie rozjeżdżam się z nim)
≤ 767.98px duże telefony / małe tablety w pionie
≤ 575.98px TELEFONY — główny cel tej nocy
≤ 400px małe telefony (iPhone SE)
============================================================================ */
/* ============================================================================
0.0 TABLET I TELEFON W POZIOMIE (768–991,98 px) — pasek boczny CHOWAM
----------------------------------------------------------------------------
BŁĄD (zgłosił Janek 2026-09-03, okno ~948 px; zmierzył kierownik, potwierdzone
moją sondą na `/pa/bitcoin/`, konto `demo`):
767 px → pasek boczny x = −260 (motyw chowa go sam), dolny pasek 78 px ✓
768 / 800 / 948 / 991 px → pasek boczny x = 0, 70 px ORAZ dolny 78 px ✗
992 px → dolny pasek `display: none`, boczny 70 px ✓
Przyczyna: dolny pasek (`responsive-mobile.css`) i cały „telefonowy" topbar
(bez logo, bez przełącznika bocznego) włączają się do 991,98 px, a pasek
boczny chowa motyw `app-saas.min.css` dopiero poniżej 767,98 px (JS motywu:
`innerWidth <= 767.98 → sidenav "full"`, 768–1140 → „condensed" 70 px).
Okno 768–991,98 px dostawało więc DWIE nawigacje naraz.
DECYZJA JANKA (formularz 2026-09-03): WARIANT B — dolny pasek zostaje do
991,98 px, a w tym oknie chowam pasek boczny. Tablet w pionie i telefon
w poziomie (844–932 px) dostają nawigację telefonową, spójną z topbarem,
który poniżej 992 px już jest telefonowy. Wariant A (dolny pasek tylko do
767,98 px) odrzucony: zmieniałby zakres kontraktu `--hodl-m-nav-h`
(czyta go `.rm-fab` w hodl-feedback.css) i wymagał ruszenia JS.
CO ROBIĘ (tylko przebicie cudzego motywu, jego plików nie dotykam):
· `.leftside-menu` → `display: none`. Motyw nie ustawia `display` na tym
elemencie, więc wystarczy zwykła reguła; „More" w dolnym pasku daje te
same linki (arkusz `#hodl-bottom-sheet`, zmierzone przy 948 px:
zakrywa pasek boczny, z-index 1042 > 1000).
· `.content-page` → `margin-left: 0` (motyw w trybie „condensed" daje 70 px)
i `min-height` z powrotem na bazowe motywu. Bez tego drugiego KAŻDA
krótka strona miałaby 2000 px wysokości: motyw w trybie „condensed"
ustawia `min-height: var(--ct-leftbar-condensed-height)` = 2000 px, żeby
pasek boczny miał gdzie się zmieścić — zmierzone: `/tasks/`, `/trash/`,
`/notifications/` przy 948 px = 2094 px, przy 767 px = 876–1197 px.
· Specyficzność: reguła motywu to `html[data-sidenav-size=condensed]
:not([data-layout=topnav]) .wrapper .content-page` (0,4,1). Moja ma
dodatkowo `body` (0,4,2) — wygrywa niezależnie od kolejności arkuszy.
· Topbar (`.navbar-custom`) w trybie „condensed" ma już x = 0 i pełną
szerokość (zmierzone przy 948 px) — nic do roboty.
· Zakres od 768 px, NIE od 0: poniżej 767,98 px motyw sam wysuwa pasek za
ekran (x = −260) i tam nic nie zmieniam — zero ryzyka regresji telefonu.
`check-media.py` przyjmuje to zapytanie, bo zawiera `max-width`.
============================================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
html[data-sidenav-size]:not([data-layout=topnav]) body .wrapper .leftside-menu {
display: none;
}
html[data-sidenav-size]:not([data-layout=topnav]) body .wrapper .content-page {
margin-left: 0;
min-height: calc(100vh - var(--ct-topbar-height) - 2px);
}
}
/* ============================================================================
0e. NAWIGACJA TELEFONOWA 2.0 — runda 5 (noc 2026-09-03/04), decyzje Janka
----------------------------------------------------------------------------
Formularz 2026-09-03: styl „jak apki giełdowe" (ciemno, kompaktowo, chipy,
duże liczby, mało ramek), dolny pasek 5 pozycji (Feed / Coins / Portfolio /
Chart / More), More jako PEŁNY EKRAN z kontem, kaflami modułów dostępnych na
telefonie, motywem, banerem beta (po angielsku) i wylogowaniem. Topbar: lupa
zamiast pola, awatar bez obwódki, wolne miejsce = wordmark „Hodlopedia".
Markup siedzi w parent.html (zgoda Janka na ten plik); tu tylko wygląd.
Cudze pliki, które przebijam (nie edytuję): responsive-mobile.css (pasek,
arkusz `.hodl-bottom-sheet` z `bottom: 64px`, chowanie brandu `!important`),
styles_my_new.css (obwódka `.hodl-topbar-user`, brand absolutnie centrowany),
app-saas.min.css (`.app-search form` z `max-width: 320px`).
Próg 991,98 px = ten sam, na którym responsive-mobile.css włącza pasek.
============================================================================ */
@media (max-width: 991.98px) {
/* --- 0e.1 Topbar: wordmark z lewej, ikony bez ramek, awatar bez obwódki -- */
body #hodl-topbar .topbar {
justify-content: flex-start;
gap: 6px;
}
body #hodl-topbar .logo-topbar {
display: none !important;
}
/* lewa grupa (logo, przełączniki, pole szukajki) jest na telefonie w całości
schowana, ale sam kontener trzymał 59 px (zmierzone) — zeruję; pole
szukajki po otwarciu jest `position: fixed`, więc szerokość 0 mu nie
przeszkadza */
body #hodl-topbar .topbar > .d-flex:first-child {
width: 0;
min-width: 0;
flex: 0 0 0;
gap: 0;
overflow: visible;
}
/* styles_my_new.css chowa brand poniżej 992 px zwykłą regułą; responsive-
mobile.css — `!important`. Mój plik ładuje się później, więc ten sam
`!important` wygrywa kolejnością. */
body #hodl-topbar .hodl-topbar-brand {
display: flex !important;
position: static;
left: auto;
top: auto;
transform: none;
max-width: 9.5rem;
max-height: none;
margin-right: auto;
padding: 0;
opacity: 1;
}
body #hodl-topbar .hodl-topbar-brand__img {
height: 30px;
width: auto;
}
body #hodl-topbar .hodl-topbar-menu {
margin-left: auto;
gap: 2px;
}
body #hodl-topbar .hodl-topbar-icon-btn,
body #hodl-topbar .topbar-menu .nav-link.hodl-topbar-icon-btn {
width: 40px;
height: 40px;
border-color: transparent;
background: transparent;
color: var(--ct-body-color, #aab8c5);
}
body #hodl-topbar .hodl-topbar-icon-btn i {
font-size: 20px;
}
body #hodl-topbar .hodl-topbar-user {
border: 0;
padding: 0 0 0 4px;
background: transparent;
min-height: 40px;
}
body #hodl-topbar .hodl-topbar-user__avatar {
width: 32px;
height: 32px;
}
/* --- 0e.2 Szukajka coinów pod lupą --------------------------------------
Pole jest w DOM jak na desktopie (hodl-topbar-coin-search.js działa bez
zmian), tylko schowane. Tap w lupę (#hodl-m-search-toggle) daje
`body.hodl-m-search-open`: pole wyjeżdża jako pełny rząd pod topbarem,
wyniki (#search-dropdown) pod nim, na całą szerokość. */
body #hodl-topbar .app-search {
display: none;
}
body.hodl-m-search-open #hodl-topbar .app-search {
display: block;
position: fixed;
left: 0;
right: 0;
top: var(--hodl-topbar-height, var(--ct-topbar-height, 60px));
z-index: 1001;
max-width: none;
padding: 8px 12px 10px;
background: var(--ct-secondary-bg, #131b28);
border-bottom: 1px solid var(--ct-border-color, #26303f);
box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6);
}
body.hodl-m-search-open #hodl-topbar .app-search form {
max-width: none;
height: auto;
}
body.hodl-m-search-open #hodl-topbar .app-search .form-control {
width: 100% !important;
min-width: 0;
height: 44px;
font-size: 16px;
}
body.hodl-m-search-open #hodl-topbar #search-dropdown.dropdown-menu {
left: 0;
right: 0;
width: 100%;
min-width: 0;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
body.hodl-m-search-open #hodl-m-search-toggle {
color: var(--ct-primary, #3aa0f7);
}
/* --- 0e.3 Dolny pasek: 5 pozycji, aktywna z kreską u góry ------------- */
body .hodl-bottom-nav {
padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
background: var(--ct-secondary-bg, #131b28);
border-top: 1px solid var(--ct-border-color, #26303f);
box-shadow: none;
}
body .hodl-bottom-nav__item {
position: relative;
gap: 3px;
padding: 4px 0 2px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .01em;
border-radius: 0;
min-height: 48px;
}
body .hodl-bottom-nav__item i {
font-size: 20px;
}
body .hodl-bottom-nav__item.is-active {
color: var(--ct-primary, #3aa0f7);
}
body .hodl-bottom-nav__item.is-active i {
transform: none;
}
body .hodl-bottom-nav__item.is-active::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 22px;
height: 3px;
margin-left: -11px;
border-radius: 0 0 3px 3px;
background: var(--ct-primary, #3aa0f7);
}
body .hodl-bottom-nav__item:active {
background: transparent;
opacity: .7;
}
/* --- 0e.4 More = pełny ekran nad paskiem --------------------------------
responsive-mobile.css sadza arkusz na `bottom: 64px` z zaokrągleniem —
tu: od góry ekranu do paska, przewijany, ciemne tło strony. */
body .hodl-bottom-sheet.hodl-more {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: var(--hodl-m-nav-h, calc(78px + env(safe-area-inset-bottom, 0px)));
z-index: 1042;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 14px 20px;
background: var(--ct-body-bg, #0e1622);
border: 0;
border-radius: 0;
box-shadow: none;
}
body .hodl-bottom-sheet.hodl-more[hidden] {
display: none;
}
body.hodl-more-open {
overflow: hidden;
}
body .hodl-more__head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
}
body .hodl-more__title {
font-size: 1.3rem;
font-weight: 700;
color: var(--ct-emphasis-color, #e7edf6);
}
body .hodl-more__close {
width: 40px;
height: 40px;
border: 0;
border-radius: 12px;
background: var(--ct-tertiary-bg, #1a2433);
color: var(--ct-body-color, #e7edf6);
font-size: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
body .hodl-more__account {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 14px;
background: var(--ct-secondary-bg, #131b28);
border: 1px solid var(--ct-border-color, #26303f);
color: inherit;
text-decoration: none;
}
body .hodl-more__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
body .hodl-more__who {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
body .hodl-more__name {
font-weight: 700;
color: var(--ct-emphasis-color, #e7edf6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body .hodl-more__handle,
body .hodl-more__hint {
font-size: .8rem;
color: var(--ct-secondary-color, #8593a8);
}
body .hodl-more__account > i {
font-size: 20px;
color: var(--ct-secondary-color, #8593a8);
}
body .hodl-more__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
body .hodl-more__grid .hodl-sheet-link {
position: relative;
min-height: 84px;
justify-content: center;
gap: 8px;
padding: 12px 6px;
border-radius: 14px;
background: var(--ct-secondary-bg, #131b28);
border: 1px solid var(--ct-border-color, #26303f);
color: var(--ct-body-color, #e7edf6);
font-size: 11.5px;
font-weight: 600;
text-align: center;
}
body .hodl-more__grid .hodl-sheet-link i {
font-size: 24px;
color: var(--ct-primary, #3aa0f7);
}
body .hodl-more__badge {
position: absolute;
top: 8px;
right: 8px;
float: none;
}
body .hodl-more__row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 0 14px;
border-radius: 14px;
background: var(--ct-secondary-bg, #131b28);
border: 1px solid var(--ct-border-color, #26303f);
color: var(--ct-body-color, #e7edf6);
font: inherit;
font-weight: 600;
text-align: left;
}
body .hodl-more__row i {
font-size: 20px;
color: var(--ct-primary, #3aa0f7);
}
body .hodl-more__row-val {
margin-left: auto;
color: var(--ct-secondary-color, #8593a8);
font-weight: 500;
}
body .hodl-more__beta {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12px;
line-height: 1.4;
color: var(--ct-secondary-color, #8593a8);
padding: 10px 12px;
border-radius: 12px;
border: 1px dashed var(--ct-border-color, #26303f);
}
body .hodl-more__beta i {
color: var(--ct-warning, #f5a623);
font-size: 16px;
flex: 0 0 auto;
}
body .hodl-more__beta b {
color: var(--ct-warning, #f5a623);
}
body .hodl-more__logout {
margin-top: auto;
}
body .hodl-more__logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
border-radius: 14px;
border: 1px solid rgba(250, 92, 124, .35);
background: rgba(250, 92, 124, .08);
color: var(--ct-danger, #fa5c7c);
font: inherit;
font-weight: 700;
}
}
/* ============================================================================
0. FUNDAMENT — dotyczy każdej strony
============================================================================ */
@media (max-width: 991.98px) {
/* --- 0.1a `--hodl-m-nav-h` — KONTRAKT MIĘDZY MODUŁAMI ------------------
⚠️ TĘ ZMIENNĄ CZYTA JUŻ DRUGI MODUŁ, spoza moich plików:
`hodl-feedback.css` (pływający przycisk `.rm-fab`, wdrożony w v353).
Nazwa, jednostka (px) i zachowanie „powyżej 991,98 px zmiennej NIE MA"
to od v353 **kontrakt publiczny** — zmianę zgłoś kierownikowi, bo cudzy
przycisk przeskoczy.
Dlaczego zmienna jest USTAWIANA TUTAJ, w CSS, skoro ustawia ją JS:
JS jest doprecyzowaniem, nie warunkiem poprawności. Zmierzone na
`/admin/roadmap/` przy 390 px:
· pierwsze malowanie strony: 68 ms
· JS ustawia zmienną: 106 ms → 38 ms okna, w którym
konsument dostawał swoją wartość zapasową (u niego `0px`);
· przy zablokowanym `hodl-mobile.js` przycisk `.rm-fab` lądował
**62 px NA pasku** i zasłaniał dwie pozycje menu.
Ta reguła zamyka oba przypadki: zmienna ma poprawną wartość od
pierwszej klatki, a JS tylko podmienia ją na ZMIERZONĄ (styl inline
na `` bije regułę z arkusza).
Wartość niżej musi zostać z `env()`, bo mój padding liczy się z tej
samej zmiennej — bez `env()` zniknąłby zapas na pasek gestów iPhone'a.
Baza 78 px jest przy tym CZYSTA, bez wkładu safe-area (sprawdzone sondą:
`env()` = 0 px w środowisku pomiaru), więc `env()` nie jest tu liczone
dwa razy. Szczegóły i skąd się bierze rozrzut 60 / 78,5 px — sekcja 0.1.
Na desktopie ta reguła nie obowiązuje (jest w `@media`), więc zmiennej
nie ma — i to jest zachowanie, na którym konsument polega: jego własna
wartość zapasowa `0px` daje mu wtedy sam odstęp od dołu. */
:root {
--hodl-m-nav-h: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* --- 0.1 Dolny pasek zasłania koniec strony ----------------------------
`.hodl-bottom-nav` jest `position: fixed`, więc NIE zajmuje miejsca
w układzie strony — miejsce pod niego trzeba zarezerwować ręcznie.
responsive-mobile.css rezerwuje 64 px, runda 1 podniosła to do 72 px.
ZMIERZONE przy 390 px: pasek ma **60 albo 78,5 px** — zależnie od tego,
czy user ma zaległe zadania. Rozkład (sprawdzone sondą, nie policzone):
4 px padding paska + 51 px pozycja + 4 px padding + 1 px kreska = 60 px
pozycja z PLAKIETKĄ zadań rośnie o 16,5 px + 2 px odstępu → 78,5 px
Runda 1 rezerwowała 72 px, czyli w wariancie z plakietką brakowało 6 px.
⚠️ To NIE jest wkład `env(safe-area-inset-bottom)`. Sprawdzone sondą
w tym środowisku: `env()` = 0 px, a `padding-bottom` paska = 4 px, czyli
gołe 4 px z `responsive-mobile.css:190` bez dodatku. Liczba 78 px jest
więc BEZ safe-area i dodanie `env()` niżej niczego nie liczy dwa razy.
Nie wpisuję żadnej z tych liczb na sztywno, bo wysokość paska zmienia się
W TRAKCIE DZIAŁANIA — nie tylko między urządzeniami. `hodl-mobile.js`
mierzy pasek i podaje wynik w `--hodl-m-nav-h`, a `ResizeObserver` łapie
każdą zmianę. Sprawdzone: schowanie plakietki 78 → 60 px, powrót 60 → 78,
powiększenie ikon do 40 px → 98 px; zmienna i rezerwa szły za każdym razem.
Wartość zapasowa (sekcja 0.1a) to CELOWO wariant WIĘKSZY, 78 px, a nie
60 px. Przy 60 px i niedziałającym JS user z zaległymi zadaniami dostałby
18 px za mało i treść wjechałaby pod pasek. Przy 78 px user bez zadań
dostaje 18 px nadmiaru — czyli nieszkodliwy pusty pas. +16 px to luz
na palec.
DO USUNIĘCIA przy scalaniu: `.content-page, .wrapper { padding-bottom: 64px }`
w responsive-mobile.css (ta reguła ją zastępuje). */
body .content-page,
body .wrapper {
padding-bottom: calc(
var(--hodl-m-nav-h, calc(78px + env(safe-area-inset-bottom, 0px))) + 16px
);
}
/* --- 0.1b Arkusz „More” wchodził na pasek -------------------------------
`#hodl-bottom-sheet` był zakotwiczony na `bottom: 64px` — czyli 14 px
PONIŻEJ górnej krawędzi 78-pikselowego paska. Zmierzone: dół arkusza
na 780 px, góra paska na 766 px, więc arkusz rysował się na ikonach menu.
Sadzam go dokładnie na pasku, tą samą zmierzoną wysokością. */
body #hodl-bottom-sheet {
bottom: var(--hodl-m-nav-h, calc(78px + env(safe-area-inset-bottom, 0px)));
}
/* --- 0.1c iPhone powiększa stronę po dotknięciu pola --------------------
Safari na iOS POWIĘKSZA całą stronę, gdy user dotknie pola formularza
z czcionką mniejszą niż 16 px — i po wyjściu z pola NIE cofa tego sam.
User zostaje z przesuniętym, za dużym widokiem i musi go zwężać palcami.
ZMIERZONE na 11 stronach przy 390 px: 102 z 329 pól tekstowych ma mniej
niż 16 px. Najczęstsze: 44× `select.form-select` (14 px), 11× `textarea
.form-control` (14 px), 11× `textarea.fb-textarea` (14,1 px), pojedyncze
schodzą do 10,9 px. Sprawdziłem też `` w parent.html
— nie ma tam `maximum-scale`, więc nic tego nie blokuje.
`!important` jest tu celowe: reguła ma brzmieć „na telefonie ŻADNE pole
nie schodzi poniżej 16 px", a moduły ustawiają te rozmiary świadomie
(14 px, 12,8 px, 11,5 px) — bez `!important` przegrywam z każdą z nich.
Dotyczy WYŁĄCZNIE pól, w które się pisze; checkboxy, suwaki i przyciski
zostają nietknięte, bo one zoomu nie wywołują.
⚠️ NIE POTWIERDZONE NA PRAWDZIWYM TELEFONIE — mierzone w Chrome headless.
Janek: proszę dotknąć pola filtra na /my_table/ i sprawdzić, czy widok
przestał skakać. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body select,
body textarea {
font-size: 16px !important;
}
/* --- 0.2 Topbar wystaje 2 px poza ekran --------------------------------
Zmierzone przy 390 px: ul.topbar-menu kończy się na 392 px, avatar jest
ścięty. Winowajcą jest domyślny padding .container-fluid (0.75rem) plus
gap-2 między ikonami. Na telefonie zwężam oba. */
body #hodl-topbar .topbar.container-fluid {
padding-left: 10px;
padding-right: 10px;
}
body #hodl-topbar .hodl-topbar-menu {
gap: 2px;
}
/* --- 0.3 Cel dotykowy ikon topbara -------------------------------------
Ikony miały ~34 px. Podnoszę do 40 px — pełne 44 px zjadłoby wysokość
paska, a te przyciski są w zasięgu kciuka tylko przy sięgnięciu w górę.
DECYZJA: 40 px zamiast 44 px, świadomy kompromis (patrz raport). */
body #hodl-topbar .hodl-topbar-icon-btn {
min-width: 40px;
min-height: 40px;
}
}
@media (max-width: 575.98px) {
/* --- 0.4 Nic nie ma prawa wystawać w poziomie --------------------------
Bezpiecznik na cały dokument: elementy z twardą szerokością (wykresy,
osadzone iframe'y) nie mogą rozpychać . Nie ustawiam overflow
na body — to psuje `position: sticky` w tabelach. */
body {
overflow-x: clip;
}
/* Obrazki i media nigdy szersze niż kontener. */
body .content-page img,
body .content-page video,
body .content-page canvas {
max-width: 100%;
}
/* --- 0.5 Pola formularzy: 16 px, żeby iOS nie zoomował ------------------
responsive-mobile.css robi to od 768 px dla input/select/textarea, ale
pomija `[contenteditable]` (edytor Quill w notatkach i raportach). */
body [contenteditable="true"],
body .ql-editor {
font-size: 16px;
}
}
/* ============================================================================
0b. TOPBAR — ciąg dalszy (po pomiarze w przeglądarce)
----------------------------------------------------------------------------
Zmierzone przy 390 px: ul.topbar-menu kończy się na 407 px, czyli 17 px poza
ekranem — cała strona dostaje poziomy scroll. Winowajcy: (a) domyślny
`padding-left: 2rem` resetu Bootstrapa na
, (b) utility `.gap-2` z
`!important` (stąd tu jedyne uzasadnione `!important` — przebijam bibliotekę,
nie moduł), (c) padding samego paska.
============================================================================ */
@media (max-width: 991.98px) {
body #hodl-topbar .topbar-menu {
padding-left: 0;
margin-bottom: 0;
gap: 4px !important;
}
body #hodl-topbar.navbar-custom {
padding-left: 0;
padding-right: 0;
}
/* Avatar usera to najczęściej klikany element paska — pełny cel dotykowy. */
body #hodl-topbar .hodl-topbar-user {
min-height: 40px;
padding-left: 2px;
padding-right: 2px;
}
}
/* ============================================================================
1. /portfolio/ — najważniejszy ekran w apce
----------------------------------------------------------------------------
STAN ZASTANY (zmierzone, 390 px, konto z 28 aktywami / 36 pozycjami):
· pasek akcji (Wallets/AT/Export/Add position/Place) to poziomy scroller bez
żadnej wskazówki, że można nim przewijać — „Add position" i „Place" były
niewidoczne; w trybie Pro `width:100%` w ogóle nie wchodzi (reguła modułu
jest zawężona do `[data-active-mode="simple"]`) i pasek rozpycha CAŁĄ stronę
do 474 px;
· pasek metryk (Net worth / Invested / Total P&L / Liquid …) zawija się do
prawej krawędzi w rwany, nieczytelny układ;
· karta aktywa ma 152 px wysokości, z czego ~58 px to sam rząd z dwoma
przyciskami, podczas gdy lewy dolny róg karty jest pusty. Przy 28 aktywach
to ~1,6 tys. px scrolla wyrzucone w powietrze.
============================================================================ */
@media (max-width: 991.98px) {
/* --- 1.1 Pasek akcji: jeden rząd z sygnałem „jest więcej" --------------
DECYZJA JANKA z 2026-08-26 (pytanie 1 w raporcie, wariant B).
Ja wdrożyłem wariant A — dwa rzędy, wszystko widać, ale kosztem ~90 px
wysokości na górze każdego ekranu portfolio. Janek wybrał B: jeden rząd,
który się przewija, plus wskazówka, że jest tam coś dalej.
Wskazówką jest MASKA gasnąca przy prawej krawędzi: ostatni przycisk
rozpływa się zamiast urywać, co czyta się jako „przewiń". Nie jest to
ozdoba — bez niej scroller na telefonie jest niewidoczny, bo iOS nie
rysuje pasków przewijania. `hodl-mobile.js` zdejmuje maskę, gdy pasek
jest przewinięty do końca (nie ma już czego zapowiadać).
⚠️ JEDEN SZCZEGÓŁ, KTÓREGO PYTANIE NIE OBEJMOWAŁO: w kolejności z HTML-a
„Add position" jest czwarty z pięciu, więc w jednym rzędzie startowałby
poza ekranem — a to była pierwotna usterka, którą naprawiamy. Dlatego
główna akcja idzie na POCZĄTEK rzędu (`order: -1`) i jest widoczna bez
przewijania; przewija się reszta. Jeśli Janek woli ścisłą kolejność
z desktopu, to jedna linijka do usunięcia.
Reguła modułu (`width: 100%`) jest zawężona do trybu simple — moja
obejmuje oba, bo w Pro to właśnie ten pasek rozpychał całą stronę. */
body .portfolio-workspace .pf-simple-header-actions {
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
padding-right: 4px;
scrollbar-width: none;
width: 100%;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
body .portfolio-workspace .pf-simple-header-actions::-webkit-scrollbar {
display: none;
}
/* Przewinięty do końca — nie ma czego zapowiadać, maska znika. */
body .portfolio-workspace .pf-simple-header-actions.is-hodl-m-scroll-end {
-webkit-mask-image: none;
mask-image: none;
}
body .portfolio-workspace .pf-compact-action {
flex: 0 0 auto;
justify-content: center;
min-height: 40px;
white-space: nowrap;
}
body .portfolio-workspace .pf-compact-action--primary {
min-height: 40px;
order: -1;
}
/* --- 1.1b Filtr aktywów: pełna szerokość ------------------------------
Moduł trzyma go przy prawej krawędzi (`justify-self: end; width: auto`),
co na telefonie daje wąski, wyśrodkowany pasek z połową pustego miejsca. */
body .pf-simple-overview .pf-simple-filterbar {
justify-self: stretch;
width: 100%;
}
body .pf-simple-overview .pf-simple-filterbar > label {
flex: 1 1 auto;
max-width: none;
}
}
@media (max-width: 767.98px) {
/* --- 1.2 Pasek metryk: siatka 2×N zamiast rwanego zawijania -------------
Moduł ustawia flex + justify-content: flex-end + separator po lewej.
Przy 390 px daje to układ, w którym „Liquid" ląduje pod „Total P&L",
a reszta wisi przy prawej krawędzi. Na telefonie czytelniejsza jest
siatka 2 kolumn wyrównana do lewej, z separatorem u góry. */
body .pf-metrics-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
}
body .pf-metric {
border-left: 0;
border-top: 1px solid rgba(131, 146, 165, 0.18);
padding: 6px 10px 6px 0;
text-align: left;
white-space: normal;
}
/* Net worth zostaje najważniejszą liczbą — pełna szerokość, bez kreski. */
body .pf-metric--primary {
border-top: 0;
grid-column: 1 / -1;
}
body .pf-metric--primary > strong {
font-size: 1.5rem;
}
body .pf-metric > strong {
font-size: 0.95rem;
}
body .pf-metric > span {
font-size: 0.62rem;
}
/* Tożsamość (avatar + „Portfolio" + licznik) nad metrykami, nie obok. */
body .pf-simple-summary {
align-items: stretch;
}
}
@media (max-width: 575.98px) {
/* --- 1.3 Nagłówek strony: opis modułu schodzi z telefonu ---------------
DECYZJA: chowam wyłącznie zdanie-opis („Track allocation, wallets…"),
bo to tekst dekoracyjny, a nie dane. Znacznik „Prices updated …" ZOSTAJE
— to realna informacja o świeżości wyceny. */
body .portfolio-workspace .pf-page-header p:not(.pf-prices-refreshed) {
display: none;
}
/* --- 1.4 Karta aktywa: to samo, tylko zwarte --------------------------
PIERWSZE PODEJŚCIE (odrzucone): przebudowa karty na siatkę 2×2. Okazało
się, że moduł JUŻ ma dwie kolumny, tylko robi je pozycjonowaniem
absolutnym — blok wartości/P&L siedzi w prawym górnym rogu, a przyciski
akcji na `top: 108px`. Moja siatka się z tym biła (rząd 24H/7D/30D zapadł
się do 32 px). Wycofane — zostawiam układ modułu i tylko go ściskam.
Zmierzone: karta 152 px, z czego ~25 px to pusty pas między blokiem
wartości a przyciskami. Przy 28 aktywach to ~700 px scrolla.
· przyciski akcji kotwiczę do DOŁU karty (`bottom`) zamiast do sztywnego
`top: 108px` — dzięki temu wysokość karty przestaje zależeć od magicznej
liczby w CSS modułu;
· odstęp między „wartością" a „P&L" 12 px → 4 px;
· cel dotykowy koszyka i licznika pozycji 30 px → 38 px. */
body .pf-simple-assets-grid {
gap: 8px;
}
body .pf-simple-asset-card.pf-simple-asset-card {
min-height: 136px;
}
body .pf-simple-asset-card > .pf-simple-asset-card__actions {
bottom: 8px;
top: auto;
}
body .pf-simple-asset-card .pf-simple-asset-card__portfolio-metrics > div + div {
margin-top: 4px;
}
body .pf-simple-asset-card > .pf-simple-asset-card__actions .pf-icon-button,
body .pf-simple-asset-card > .pf-simple-asset-card__actions .pf-position-count {
height: 38px;
min-width: 38px;
}
/* --- 1.5 Rozwinięte pozycje pod kartą ---------------------------------- */
body .pf-simple-position-row {
gap: 6px;
}
body .pf-simple-position-row__actions .pf-icon-button {
height: 40px;
min-width: 40px;
}
}
@media (max-width: 767.98px) {
/* --- 1.6 Tryb Pro: tabele przewijane w poziomie z PRZYKLEJONĄ pierwszą
kolumną --------------------------------------------------------------
DECYZJA (świadoma, per tabela): tabel Pro NIE zamieniam na listę kart.
Powód: karty w tej apce już istnieją — to jest dokładnie tryb Simple.
Zrobienie z Pro drugiej listy kart skasowałoby jedyną różnicę między
trybami. Zamiast tego zostaje scroll w poziomie WEWNĄTRZ `.pf-table-wrap`
(moduł już to ma), a ja dokładam to, czego brakowało: kolumna „Asset"
/ „Position" zostaje na ekranie przy przewijaniu, więc user wie, czyj
to wiersz. Bez tego liczby po prawej są bezużyteczne.
Cień po prawej stronie kolumny = sygnał „to jest przypięte". */
body .pf-table-wrap {
-webkit-overflow-scrolling: touch;
}
body .pf-table-wrap .pf-data-table > thead > tr > th:first-child,
body .pf-table-wrap .pf-data-table > tbody > tr > td:first-child {
left: 0;
position: sticky;
z-index: 3;
}
body .pf-table-wrap .pf-data-table > tbody > tr > td:first-child {
background: var(--pf-card-bg);
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.45);
max-width: 138px;
}
body .pf-table-wrap .pf-data-table > thead > tr > th:first-child {
background: var(--pf-surface-raised);
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.45);
z-index: 4;
}
/* Nazwa coina w przyklejonej kolumnie nie może z niej wystawać na
przewijaną treść (zweryfikowane zrzutem: „Internet Computer" nachodziło
na kolumnę Holdings). */
body .pf-table-wrap .pf-asset-cell {
max-width: 148px;
min-width: 0;
}
body .pf-table-wrap .pf-asset-cell > div {
min-width: 0;
overflow: hidden;
}
body .pf-table-wrap .pf-asset-cell .pf-cell-subtitle,
body .pf-table-wrap .pf-asset-cell .pf-table-link {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- 1.7 Nagłówek eksploratora: akcje pod tytułem, nie obok ------------ */
body .pf-explorer-header {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
body .pf-explorer-header__actions {
flex-wrap: wrap;
width: 100%;
}
}
/* ============================================================================
1b. /portfolio/ PO PRZEBUDOWIE (v363–v369) — pasek, lista Simple, karta
„Positions distribution" (runda 3, 2026-08-29)
----------------------------------------------------------------------------
Strona z sekcji 1 żyje już WYŁĄCZNIE pod /wallet_view/ (tamte reguły
zostają — pilnuje tego test kierownika). Nowa /portfolio/ ma inne klasy
(`pf2-*`) i przy 390 px trzy rzeczy zepsute. ZMIERZONE (probe.js, demo2):
· LISTA SIMPLE: wiersz to siatka 130+110+150+100+88 px + odstępy = 662 px
w kontenerze 380 px z `overflow-x: hidden`. „Value & share" ucięte
w połowie liczby, „P&L" (x 463–563) i przyciski koszyka / pozycji
(x 577–665) leżą POZA EKRANEM — nieklikalne. Do tego MOJA reguła 1.4
(`min-height: 136px` dla starych kart) trafia w nowy wiersz, bo ma te
same klasy, i rozdyma go z 61 do 136 px: 40 wierszy × 75 px ≈ 3000 px
pustego scrolla. Na 768–991 px to samo w mniejszej skali: kontener
597–825 px, siatka 662–856 px, przyciski ucięte prawą krawędzią.
· GÓRNY PASEK `.pf2-topbar`: 199 px wysokości — tożsamość 109 px po lewej,
akcje ściśnięte w kolumnę 255 px zawiniętą w 4 rzędy.
· PRO, karta „Positions distribution": nagłówek ma `flex-wrap: nowrap`,
pole tytułu 0 px (tytuł rysuje się NA chipach General/All), pasek
narzędzi 444 px ucięty, select sortowania i przycisk powiększania
na x=483 — poza ekranem. Przy 768 px jeszcze się mieści (przycisk
kończy się na 703 z 717), więc próg 767,98.
Decyzja Janka 2026-08-29: „napraw zepsute" — pasek w wariancie A (jeden
przewijany rząd z maską, jak w 1.1), lista w dwóch linijkach, nagłówek
karty zawijany. Prawy panel Portfolio na `/` NIE wraca na telefon.
============================================================================ */
@media (max-width: 991.98px) {
/* --- 1b.1 Lista Simple, 768–991 px: siatka płynna zamiast sztywnych
pikseli, żeby przyciski wróciły na ekran. Sparkline schowany na całym
zakresie (moduł chowa go od 899,98 px w dół, a od 900 w górę siatka
z nim ma 856 px na 825 px kontenera). Nagłówek kolumn dostaje tę samą
siatkę, żeby kolumny się zgadzały. -------------------------------- */
body .pf2-list-card .pf2-list-head,
body .pf2-asset-row .pf2-row-line {
gap: 10px;
grid-template-columns: minmax(0, 1.3fr) 100px minmax(0, 1.5fr) 100px 88px;
}
body .pf2-list-card .pf2-lh-spark,
body .pf2-asset-row .pf2-row-spark {
display: none;
}
/* Moja reguła 1.4 (stare karty) nie ma tu nic do roboty — moduł chce
wiersza płaskiego (`min-height: 0`), ale przegrywa z nią specyficznością. */
body .pf2-asset-row.pf2-asset-row.pf-simple-asset-card {
min-height: 0;
}
}
@media (max-width: 767.98px) {
/* --- 1b.2 Pasek: tożsamość na całą szerokość, pod nią akcje w JEDNYM
przewijanym rzędzie z gasnącą krawędzią (wariant B Janka z rundy 1;
`hodl-mobile.js` zdejmuje maskę po przewinięciu do końca). -------- */
body .pf2-topbar {
flex-wrap: wrap;
gap: 8px 14px;
}
body .pf2-topbar__id {
flex: 1 1 100%;
min-width: 0;
}
body .pf2-topbar__actions {
-webkit-overflow-scrolling: touch;
flex: 1 1 100%;
flex-wrap: nowrap;
gap: 6px;
justify-content: flex-start;
margin-left: 0;
overflow-x: auto;
padding: 2px 4px 2px 0;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
body .pf2-topbar__actions::-webkit-scrollbar {
display: none;
}
body .pf2-topbar__actions.is-hodl-m-scroll-end {
-webkit-mask-image: none;
mask-image: none;
}
body .pf2-topbar__actions > * {
flex: 0 0 auto;
}
body .pf2-topbar__actions .pf-compact-action {
justify-content: center;
min-height: 40px;
white-space: nowrap;
}
/* Główna akcja na początek rzędu — w kolejności z HTML-a jest piąta
z sześciu i startowałaby poza ekranem (ta sama decyzja co w 1.1). */
body .pf2-topbar__actions .pf-compact-action--primary {
order: -1;
}
/* Przełącznik Simple/Professional: moduł daje przyciskom `flex: 1`
i przełącznik rozciąga się na cały rząd (zmierzone: 374 px, jeden
przycisk 183 px). Wraca do szerokości treści i ciaśniejszego paddingu
(~230 px), żeby razem z „Add position" mieścił się na pierwszym
ekranie rzędu. Trzy klasy w selektorze = specyficzność wyższa niż
`.portfolio-workspace[data-active-mode] .pf-mode-switch` modułu. */
body .portfolio-workspace .pf2-topbar .pf-mode-switch {
flex: 0 0 auto;
width: auto;
}
body .portfolio-workspace .pf2-topbar .pf-mode-switch button {
flex: 0 0 auto;
padding: 8px 12px;
}
/* Otwarte menu „Export": maska gasnącej krawędzi tnie WSZYSTKO, co pasek
rysuje — także menu, które `hodl-mobile.js` wypycha nad pasek Popperem
w trybie `fixed` (maska tworzy kontekst warstw i przycina po pudełku
paska). Na czas otwartego menu maska znika. `:has()`: Safari 15.4+,
Chrome 105+ — starsza przeglądarka zostaje z maską, menu i tak działa
poza obszarem paska. */
body .pf2-topbar__actions:has(.dropdown-menu.show),
body .portfolio-workspace .pf-simple-header-actions:has(.dropdown-menu.show) {
-webkit-mask-image: none;
mask-image: none;
}
/* --- 1b.3 Lista Simple na telefonie: wiersz w DWÓCH linijkach --------
1: coin · cena (+24h) · wartość z paskiem udziału
2: P&L (z podpisem, bo nagłówek kolumn znika) · koszyk · pozycje
Nagłówek kolumn schowany — sortowanie zostaje w rozwijanym „Value ↓"
(te same przyciski, jedno źródło prawdy w JS modułu). ------------- */
body .pf2-list-card .pf2-list-head {
display: none;
}
body .pf2-asset-row .pf2-row-line {
gap: 6px 10px;
grid-template-areas:
"asset price value"
"pnl pnl actions";
grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr);
padding: 10px 2px;
}
body .pf2-asset-row .pf2-row-asset {
grid-area: asset;
}
body .pf2-asset-row .pf2-row-price {
grid-area: price;
}
body .pf2-asset-row .pf2-row-value {
grid-area: value;
}
/* Udział i ilość: gdy nie mieszczą się obok wartości, schodzą w całości
pod nią (bez tego łamały się w środku: „1.5 / ZEC"). */
body .pf2-asset-row .pf2-row-value__line {
flex-wrap: wrap;
gap: 0 8px;
}
body .pf2-asset-row .pf2-row-pnl {
align-items: baseline;
display: flex;
gap: 8px;
grid-area: pnl;
text-align: left;
}
body .pf2-asset-row .pf2-row-pnl::before {
color: var(--pf-muted, #8392a5);
content: "P&L";
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body .pf2-asset-row .pf2-row-actions {
grid-area: actions;
}
/* Cele dotyku: moduł daje 28 px. */
body .pf2-asset-row .pf2-row-actions .pf-icon-button,
body .pf2-asset-row .pf2-row-actions .pf-position-count {
height: 36px;
min-width: 36px;
}
/* --- 1b.4 Pro: nagłówek karty „Positions distribution" zawijany -----
Linia 1: tytuł (+opis z wielokropkiem) i przycisk powiększania;
linia 2: chipy General/Details, All/Big/Small i select sortowania,
same zawijane. Moduł przypina przyciskowi `order: 99` (na końcu
rzędu) — u mnie wraca do kolejności z HTML-a, żeby siedział przy
tytule, a nie pod chipami. ------------------------------------------ */
body .pf2-card--dist .pf-pro-insight > header {
flex-wrap: wrap;
gap: 6px 8px;
}
body .pf2-card--dist:not(.is-max) .pf-pro-insight > header > div:first-child {
flex: 1 1 0;
min-width: 120px;
}
body .pf2-card--dist .pf-pro-insight > header .pf2-max-btn {
margin-left: auto;
order: 0;
}
body .pf2-card--dist .pf-pro-distribution__toolbar,
body .pf2-card--dist .pf-pro-distribution__controls {
flex: 1 1 100%;
flex-wrap: wrap;
width: 100%;
}
}
/* ============================================================================
2. /my_table/ — tabela decyzyjna (do 25 kolumn)
----------------------------------------------------------------------------
STAN ZASTANY (390 px):
· sama TABELA jest zrobiona dobrze — moduł ma już przyklejone kolumny
`rank` + `coin` i własny kontener `.my-table-wrap` z przewijaniem
w poziomie. Tego NIE ruszam, to jest zrobione porządnie.
· problemem jest STEROWANIE nad tabelą: pigułki filtra (`My List / All Coins /
Hot / Rating…`) siedzą w niewidocznym poziomym scrollerze i urywają się
w połowie słowa; rząd Type/Tier/Scope ma 635 px w kontenerze o 376 px;
przełącznik trybów (Minimalist…Pro) tak samo. User nie wie, że coś tam jest.
· cele dotykowe: selecty screenera mają 30 px wysokości, przyciski trybów 30 px.
DECYZJA — czy wymuszać tryb „Minimalist" na telefonie (brief o to pytał):
NIE. Powody: (1) tryb jest zapisywany po stronie usera, więc wymuszenie
zmieniłoby mu ustawienie także na desktopie; (2) tabela ma już przyklejoną
kolumnę coina, więc przewijanie w bok działa i nie gubi kontekstu;
(3) to zmiana zachowania, a nie wyglądu — czyli nie moja działka. Wariant
alternatywny (przełącznik „mniej kolumn na telefonie") opisany w raporcie.
============================================================================ */
@media (max-width: 767.98px) {
/* --- 2.1 Pigułki filtra: zawijanie zamiast ukrytego scrolla ------------ */
body .my-table-page .my-table-toolbar__filters {
min-width: 0;
width: 100%;
}
body .my-table-page .my-table-filter-pills {
flex-wrap: wrap;
overflow-x: visible;
width: 100%;
}
body .my-table-page .my-table-filter-pill {
min-height: 38px;
}
/* --- 2.2 Screener Type / Tier / Scope: dwa pola w rzędzie -------------- */
body .my-table-page .mt-screener {
width: 100%;
}
body .my-table-page .mt-screener__field {
flex: 1 1 45%;
min-width: 0;
}
body .my-table-page .mt-screener__select {
flex: 1 1 auto;
height: 40px;
min-width: 0;
width: 100%;
}
body .my-table-page .mt-scope-range,
body .my-table-page #mt-labels-filter {
flex: 1 1 100%;
}
body .my-table-page .mt-labels-btn {
min-height: 40px;
width: 100%;
}
/* --- 2.3 Przełącznik trybów: zawijanie + większe cele ------------------
Sprawdzone w my-table.js: `initModes` tylko przełącza klasę na klik —
nie ma pływającego wskaźnika, który zawijanie by rozjechało. */
body .my-table-page .mt-modes {
display: flex;
flex-wrap: wrap;
width: 100%;
}
body .my-table-page .mt-mode-opt {
flex: 1 1 auto;
min-height: 38px;
}
body .my-table-page .mt-layoutbar__row {
flex-wrap: wrap;
gap: 8px;
}
body .my-table-page .mt-views {
width: 100%;
}
body .my-table-page .mt-tool-btn {
min-height: 40px;
min-width: 40px;
}
}
@media (max-width: 575.98px) {
/* --- 2.4 Panel ustawień kolumn jako arkusz na pełny ekran --------------
`.mt-drawer` to szuflada z prawej. Na telefonie 380 px szuflady zostawia
30 px tła — czyli i tak jest to pełny ekran, tylko z krzywą krawędzią.
Robię z tego jawny pełny ekran. */
body .my-table-page .mt-drawer {
max-width: 100%;
width: 100%;
}
body .my-table-page .my-table-settings__option {
min-height: 40px;
}
body .my-table-page .mt-order-item {
min-height: 44px;
}
/* --- 2.5 Paginacja i „Rows": pełne cele dotykowe ---------------------- */
body .my-table-page .pagination .page-link {
min-height: 40px;
min-width: 40px;
}
}
/* --- 2.6 Licznik „1–100 of 18013" łamał się na trzy linie ------------------
Zmierzone (`.my-table-meta__count`, konto `demo`): 390 px → 43 × 56 px,
3 linie („1–100 / of / 18013"); 400–420 px → 2 linie; od 440 px → 1 linia
91 × 19 px. Powód: w `.my-table-meta__left` (flex bez zawijania) szukajka ma
od 991,98 px `flex: 1 1 100%` (styles_my_new.css), więc licznik dostaje
resztki. Decyzja Janka (formularz 2026-09-03): licznik w JEDNEJ linii pod
rzędem Rows/Search, wyrównany do prawej; szukajka bez zmian.
Próg 575,98 px (telefony), nie 439,98: na 440–575 px licznik i tak siedział
na styk, a szukajka zyskuje ~100 px. Koszt: pasek wyższy o ~27 px. */
@media (max-width: 575.98px) {
body .my-table-meta__left {
flex-wrap: wrap;
flex: 1 1 100%;
}
/* szukajka zostaje w pierwszym rzędzie obok Rows — bazę 100% z cudzego
pliku zamieniam na „rośnij w to, co zostało" */
body .my-table-meta__left .my-table-search--meta {
flex: 1 1 120px;
min-width: 0;
}
body .my-table-meta__count {
flex: 1 1 100%;
text-align: right;
white-space: nowrap;
}
}
/* ============================================================================
2b. ZWIJANE PASKI STEROWANIA (obsługa z hodl-mobile.js)
----------------------------------------------------------------------------
Powód istnienia JS-a: na `/my_table/` przy 390 px sterowanie zajmuje ~630 px
ZANIM zacznie się tabela. Na ekranie 844 px user wchodzi na tabelę i tabeli
nie widzi. Domyślnie zwinięte, stan pamiętany w localStorage.
Przycisk jest wstrzykiwany TYLKO przy wąskim ekranie i usuwany przy szerokim,
więc na desktopie DOM jest identyczny jak na master.
============================================================================ */
@media (max-width: 767.98px) {
body .hodl-m-collapse {
align-items: center;
background: var(--ct-tertiary-bg, #1a2433);
border: 1px solid var(--ct-border-color, #26303f);
border-radius: 10px;
color: var(--ct-body-color, #e7edf6);
display: flex;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
gap: 8px;
margin: 0 0 10px;
min-height: 44px;
padding: 0 12px;
width: 100%;
}
body .hodl-m-collapse > i {
flex: 0 0 auto;
font-size: 16px;
line-height: 1;
}
body .hodl-m-collapse__summary {
color: var(--ct-secondary-color, #8593a8);
flex: 1 1 auto;
font-weight: 500;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
body .hodl-m-collapse__chev {
margin-left: auto;
transition: transform 0.15s ease;
}
body .hodl-m-collapse__summary:not(:empty) + .hodl-m-collapse__chev {
margin-left: 0;
}
body .hodl-m-collapse[aria-expanded="true"] .hodl-m-collapse__chev {
transform: rotate(180deg);
}
/* Co znika po zwinięciu — per moduł. */
body .my-table-card.is-hodl-m-collapsed > .mt-toolbar,
body .my-table-card.is-hodl-m-collapsed > .mt-layoutbar,
body .pred-card.is-hodl-m-collapsed > .pred-toolbar {
display: none;
}
/* Przycisk zwijania wstrzykiwany w środek karty modułu — bez marginesu
bocznego wygląda jak jej część, a nie jak coś doklejonego. */
body .pred-card > .hodl-m-collapse {
border-radius: 0;
border-left: 0;
border-right: 0;
margin-bottom: 0;
}
}
@media (max-width: 575.98px) {
/* --- 2.6 BŁĄD ZASTANY: przyklejona kolumna „Coin" zasłaniała „Price" ----
Znalezione pomiarem, nie okiem: przy 390 px komórka ceny zaczyna się
na 154 px, a przyklejona kolumna coina kończy na 191 px — czyli 44 px
ceny (dokładnie „$6" z „$68,973") chowa się POD kolumną coina.
Przyczyna: `styles_my_new.css` (cudzy plik) ukrywa kolumnę `rank`
poniżej 575.98 px, ale `my-table-page.css` (też cudzy) trzyma dla coina
`left: var(--mt-rank-sticky-w)` = 44 px, licząc na to, że rank tam jest.
Sticky przesuwa więc coina o szerokość kolumny, której już nie ma.
Na desktopie problemu nie ma (zmierzone przy 1600 px: rank 54 px,
kolumny nie nachodzą) — to defekt wyłącznie telefonowy.
Docelowa naprawa należy do właściciela `my-table-page.css`; do tego czasu
zeruję offset stąd. */
body .my-table-page .my-table-datatable[data-has-rank="1"] thead th.coin-column,
body .my-table-page .my-table-datatable[data-has-rank="1"] tbody td.coin-column {
left: 0;
}
}
/* ============================================================================
3. /my/ — prywatny warsztat coina
----------------------------------------------------------------------------
ZNALEZISKO (największa dziura, jaką znalazłem tej nocy):
na telefonie NIE DA SIĘ dojść do panelu „My status".
Dlaczego: `my_coin.html` używa tego samego `#feed-layout-row` co strona
główna (`my_network.html`) i `my_page.html`. Panele boczne mają `d-none
d-lg-block`, a przełączniki „Profil / Notes / Portfolio" (`_feed_mobile_
panel_toggles.html`) są jedyną drogą do nich na wąskim ekranie —
TYLKO że `responsive-mobile.css` (cudzy plik) ukrywa te przełączniki
dla WSZYSTKICH stron z `#feed-layout-row`:
#feed-layout-row .feed-mobile-toggles { display: none !important; }
#feed-layout-row #right-panel { display: none !important; }
To była świadoma decyzja dla strony głównej („Network na telefonie = SAME
NOTATKI") i tam jest słuszna. Ale skutkiem ubocznym objęła `/my/`,
gdzie w lewym panelu siedzi **My status**, taski, poziomy cenowe i tożsamość
coina, a w prawym — Twoja pozycja w tym coinie i szczegóły. Czyli cały sens
tej strony. Na telefonie zostawał sam wykres i cudze notatki.
CO ROBIĘ: na `/my/` (rozpoznaję po `data-task-anchor-type="coin"`,
którego nie mają pozostałe dwie strony) rozkładam wszystkie trzy panele
jeden pod drugim. Kolejność: **status i pozycja NAD** wykresem i notatkami —
po to się tu wchodzi, a notatki potrafią mieć 2 000 px.
`!important` jest tu konieczne, bo przebijam utility `.d-none` Bootstrapa
i regułę z `responsive-mobile.css` — czyli dokładnie te dwa przypadki,
na które brief pozwala go zostawić.
============================================================================ */
@media (max-width: 991.98px) {
body #feed-layout-row[data-task-anchor-type="coin"] > #left-panel,
body #feed-layout-row[data-task-anchor-type="coin"] > #right-panel {
display: block !important;
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
body #feed-layout-row[data-task-anchor-type="coin"] > #left-panel {
order: 1;
}
body #feed-layout-row[data-task-anchor-type="coin"] > #right-panel {
order: 2;
}
body #feed-layout-row[data-task-anchor-type="coin"] > #middle-panel {
order: 3;
}
/* Panele boczne mają na desktopie `position: sticky` i limit wysokości —
na telefonie to zbędne, treść ma płynąć. */
body #feed-layout-row[data-task-anchor-type="coin"] .side-panel {
max-height: none;
overflow: visible;
position: static;
}
/* Kolejność sekcji w lewym panelu. W szablonie taski stoją PRZED „My status",
co na desktopie nie przeszkadza (wszystko widać naraz), ale na telefonie
wpycha najważniejszy panel ekran niżej. `.side-panel--left` jest kolumną
flexa, a sekcja tasków ma stabilne `#tasks-panel`, więc wystarczy `order`
— bez ruszania szablonu i bez kruchego `:nth-child`.
Kolejność docelowa: tożsamość + cena → My status → poziomy → Tasks. */
body #feed-layout-row[data-task-anchor-type="coin"] #tasks-panel {
order: 5;
}
}
/* ============================================================================
3b. NAGŁÓWEK FEEDU NOTATEK (wspólny dla `/`, `/my_page/` i `/my/`)
----------------------------------------------------------------------------
Zmierzone przy 390 px: pasek zakładek (`Community / Following / Mine`)
zajmuje 322 px z 355 dostępnych, więc na szukajkę i filtr kategorii zostają
33 px — pole wjeżdża NA zakładkę „Mine" i nie da się w nie trafić palcem.
Rozwiązanie: dwa rzędy zamiast jednego. Zakładki na całą szerokość,
szukajka z filtrem pod spodem.
RUNDA 4 (2026-09-03): próg 575,98 → 767,98 px. Zmierzone pole „Search notes…"
(input) na `/`, konto `demo`: 390 px → 188 px (dwa rzędy) · 576 px → 56 px ·
600 px → 44 px · 640 px → 84 px · 700 px → 144 px · 767 px → 159 px.
Między 576 a ~700 px zakładki (318 px) i cudze `max-width: 200px` na
formularzu zostawiały polu kilkadziesiąt pikseli — placeholder ucięty do
jednej litery. Decyzja Janka (formularz): dwa rzędy do 767,98 px; koszt:
nagłówek wyższy o ~40 px w oknie 576–767 px.
============================================================================ */
@media (max-width: 767.98px) {
body .feed-header__inner {
flex-wrap: wrap;
row-gap: 8px;
}
body .feed-header__leading {
flex: 1 1 100%;
min-width: 0;
}
body .feed-header__tabs {
flex: 1 1 auto;
justify-content: space-between;
min-width: 0;
}
body .feed-header__tools {
flex: 1 1 100%;
justify-content: flex-start;
}
body .feed-header__search {
flex: 1 1 auto;
max-width: none;
}
body .feed-header__tab {
min-height: 40px;
}
body .feed-header__icon-btn {
min-height: 40px;
min-width: 40px;
}
}
/* ============================================================================
4. /coin_view/ — publiczna karta coina
----------------------------------------------------------------------------
Ten sam schemat co na `/my/`, tylko przyczyna inna: tu panele boczne
mają zwykłe `d-none d-lg-block` Bootstrapa i NIE MA żadnych przełączników
mobilnych (`_feed_mobile_panel_toggles.html` nie jest tu w ogóle włączony).
Efekt: poniżej 992 px znikają Categories, Market, Contracts, Research
(lewy) oraz Total score, Community, Prediction, Wallets (prawy) — czyli
wszystko poza wykresem i „Hodlopedia signals".
Rozpoznanie strony: `#left-panel` ma tu `col-lg-6`, a na `/my/`
`col-lg-3` — to wystarcza, żeby nie ruszyć tamtej strony drugi raz.
============================================================================ */
@media (max-width: 991.98px) {
body #left-panel.col-lg-6,
body #right-panel.col-lg-6 {
display: block !important;
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
body #left-panel.col-lg-6 .side-panel,
body #right-panel.col-lg-6 .side-panel {
max-height: none;
overflow: visible;
position: static;
}
}
@media (max-width: 575.98px) {
/* Wiersze „etykieta ⟷ wartość" w panelach coina: długa wartość
(np. lista giełd) ma się zawijać, a nie uciekać za krawędź. */
body .side-panel__section .side-panel__row,
body .cv-sig-row {
align-items: flex-start;
gap: 10px;
}
body .cv-sig-row > :last-child,
body .side-panel__section .side-panel__row > :last-child {
min-width: 0;
text-align: right;
white-space: normal;
word-break: break-word;
}
/* Nagłówki sekcji akordeonu = pełny cel dotykowy. */
body .cv-accordion .accordion-button {
min-height: 48px;
}
}
/* ============================================================================
5. /predictions/ — mapa poziomów cenowych
----------------------------------------------------------------------------
STAN ZASTANY (390 px): wiersz to siatka `[etykieta 174 px | tor]`. Na tor
zostaje ~200 px, przez co komunikat „no levels in range" leży na chipach
horyzontów, a chip „Intra" jest ucięty. Moduł zjeżdża z 242 px do 174 px
przy 720 px i na tym kończy.
CO ROBIĘ: przy ≤575.98 px rozdzielam wiersz na DWA POZIOMY — etykieta
(coin, cena, chipy horyzontów) na górze, tor poziomów pod nią na pełną
szerokość. Wiersz rośnie z 44 px do ~76 px, ale i etykieta, i tor dostają
całe 366 px zamiast dzielić je po połowie.
Dlaczego to jest bezpieczne: `--pp-label-w` jest w tym module JEDNYM
źródłem prawdy dla przesunięcia toru — używają jej `.pred-grid`,
`.pred-axis` ORAZ `predictions-page.js:1111`, które liczy pozycję linii
„now" jako `calc(var(--pp-label-w) + (100% - var(--pp-label-w)) * z)`.
Ustawienie zmiennej na 0 przesuwa siatkę, oś i linię „now" spójnie,
bez dotykania JS-a. Sprawdzone: linia „now" trafia tam, gdzie powinna.
============================================================================ */
@media (max-width: 575.98px) {
body .predictions-workspace {
--pp-label-w: 0px;
}
body .predictions-workspace .pred-row {
align-items: stretch;
grid-template-columns: 1fr;
min-height: 0;
padding: 6px 0 2px;
}
body .predictions-workspace .pred-label {
padding: 0 0 4px;
}
body .predictions-workspace .pred-htags {
flex-wrap: wrap;
}
body .predictions-workspace .pred-htag {
height: 22px;
padding: 0 8px;
}
/* Tor bez etykiety obok może być niższy — i tak jest to pasek. */
body .predictions-workspace .pred-track {
height: 38px;
}
/* Pomoc „How to read" wychodziła poza ekran (zmierzone: 179..521 px). */
body .predictions-workspace .pred-helper__grid {
grid-template-columns: 1fr;
max-width: 100%;
}
body .predictions-workspace .pred-helper > div:not(.pred-helper__grid),
body .predictions-workspace .pred-helper__grid {
box-sizing: border-box;
}
/* Pasek narzędzi: wszystko w jednym rzędzie się nie mieści. */
body .predictions-workspace .pred-toolbar {
flex-wrap: wrap;
gap: 6px;
}
body .predictions-workspace .pred-hgroup {
flex-wrap: wrap;
width: 100%;
}
body .predictions-workspace .pred-hchip,
body .predictions-workspace .pred-ghost {
min-height: 38px;
}
body .predictions-workspace .pred-card__actions {
flex-wrap: wrap;
width: 100%;
}
body .predictions-workspace .pred-search--head,
body .predictions-workspace .pred-search--head input {
width: 100% !important;
}
}
@media (max-width: 575.98px) {
/* Nagłówek karty predykcji zajmował 290 px zanim zaczęły się dane.
Zdejmuję nadtytuł „LEVELS CHART" (czysta dekoracja — tuż pod nim jest
„Price Levels Map") i ściskam rząd tytułu. Licznik „18 coins · 18 setups"
ZOSTAJE, bo to informacja. */
body .predictions-workspace .pred-eyebrow {
display: none;
}
body .predictions-workspace .pred-card__head {
gap: 8px;
padding-bottom: 10px;
padding-top: 10px;
}
body .predictions-workspace .pred-card__head h1,
body .predictions-workspace .pred-title-row h1 {
font-size: 1.15rem;
}
body .predictions-workspace .pred-card__actions {
gap: 6px;
}
}
/* ============================================================================
6. /ta/ — Technicals (wykres Lightweight Charts + wskaźniki)
----------------------------------------------------------------------------
STAN ZASTANY (390 px):
· górny pasek wykresu (tytuł, interwały 15m/1h/4h/1D/1W, Levels, Avg buy,
Params, LIVE, zrzut, pełny ekran) jest jednym rzędem `justify-content:
space-between` — wszystko na siebie nachodzi i nie da się w nic trafić;
· legenda (`Price O H L C`, EMA/SMA/SuperTrend/RSI/MACD) jest przyklejona
na `left: 86px` z `max-width: calc(100% - 190px)`, czyli przy 390 px ma
200 px szerokości i rozlewa się na SIEDEM linii W POPRZEK świec;
· panel dokłada ~30 px paddingu z każdej strony, których wykres nie ma
skąd odzyskać.
⚠️ CZEGO TU NIE NAPRAWIĘ (do raportu, wymaga zmiany JS modułu):
`hodl-ta.js:2526` włącza LEWĄ skalę procentową (`leftPriceScale.visible`),
a prawa pokazuje ceny. Przy 390 px obie osie zjadają ~200 px z 366 —
na świece zostaje mniej niż połowa wykresu. Naprawa to jedna linijka
w module (ukryć lewą skalę poniżej ~600 px), ale obiekt wykresu jest
zmienną lokalną, nie da się do niego dosięgnąć z zewnątrz.
============================================================================ */
@media (max-width: 575.98px) {
/* --- 6.1 Pasek wykresu: kilka rzędów zamiast jednego zlepka ----------- */
body .ta-chart__topbar {
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
padding: 8px 8px 4px;
}
body .ta-chart__lead,
body .ta-chart__tools {
flex: 1 1 100%;
flex-wrap: wrap;
gap: 4px 8px;
}
body .ta-chart__intervals {
flex-wrap: wrap;
}
body .ta-int-mini,
body .ta-tool-btn {
min-height: 34px;
}
/* --- 6.2 Legenda: mniejsza i wpuszczona pod pasek, nie na świece ------ */
body .ta-chart__legend {
font-size: 12px;
gap: 2px 8px;
left: 8px;
max-width: calc(100% - 92px);
}
/* --- 6.3 Oddaję wykresowi padding panelu ------------------------------ */
body .ta-panel--chart {
padding-left: 8px;
padding-right: 8px;
}
body .ta-chart__box {
height: 460px;
min-width: 0;
resize: none; /* uchwyt zmiany rozmiaru jest bezużyteczny palcem */
}
/* --- 6.4 Reszta modułu: pasek narzędzi i pickery ---------------------- */
body .ta-toolbar,
body .ta-panel__head,
body .ta-controls {
flex-wrap: wrap;
gap: 6px;
}
body .ta-btn,
body .ta-seg__opt {
min-height: 38px;
}
body .ta-picker {
max-width: calc(100vw - 24px);
}
body .ta-search input,
body .ta-search {
min-width: 0;
width: 100%;
}
}
/* ============================================================================
7. /lab/ — Portfolio Lab
----------------------------------------------------------------------------
STAN ZASTANY (390 px): tabela planu ma 7 kolumn (Coin, Price, Target, You,
Simulated, After sim, Action) w kontenerze `.lab-tablewrap` z przewijaniem
w poziomie. Widać z niej tylko „Coin" i „Price" — czyli wszystko poza
właściwą treścią modułu. Po przewinięciu w bok znika nazwa coina i nie
wiadomo, czyj to wiersz.
ROZWIĄZANIE: to samo co w tabelach `/portfolio/` — kolumna coina przyklejona.
Wiersze-nagłówki walletów (`td` z `colspan`) świadomie WYŁĄCZONE z przyklejania:
komórka na całą szerokość wiersza „jechałaby" razem z przewijaniem
i zasłaniała dane.
============================================================================ */
@media (max-width: 767.98px) {
body .lab-tablewrap {
-webkit-overflow-scrolling: touch;
}
body .lab-tablewrap .lab-table > thead > tr > th:first-child,
body .lab-tablewrap .lab-table > tbody > tr > td:first-child:not([colspan]) {
left: 0;
position: sticky;
z-index: 3;
}
body .lab-tablewrap .lab-table > tbody > tr > td:first-child:not([colspan]) {
background: var(--l2-surface, var(--ct-secondary-bg, #131b28));
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.45);
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
}
body .lab-tablewrap .lab-table > thead > tr > th:first-child {
background: var(--l2-surface-2, var(--ct-tertiary-bg, #1a2433));
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.45);
z-index: 4;
}
}
@media (max-width: 575.98px) {
/* Wstęp modułu („Plan, simulate, stress-test" + akapit) zajmował ~300 px
przed pierwszym sterowaniem. Zostawiam tytuł i skracam resztę —
akapit jest wyjaśnieniem, a nie danymi, i to samo mówi przycisk „Guide". */
body .lab2 .lab-hero__lead,
body .lab2 .lab-page__lead {
font-size: 14px;
}
body .lab2 .lab-hero__eyebrow {
display: none;
}
body .lab2 .lab-hero h1,
body .lab2 .lab-page__title {
font-size: 1.3rem;
}
body .lab2 .lab-toolbar,
body .lab2 .lab-step__head,
body .lab2 .lab-chips {
flex-wrap: wrap;
gap: 6px;
}
body .lab2 .lab-btn,
body .lab2 .lab-chip {
min-height: 38px;
}
}
/* ============================================================================
8. /tasks/ — lista, board, kalendarz
----------------------------------------------------------------------------
STAN ZASTANY (390 px):
· nagłówek `Tasks | Active/Today/Overdue | List Board Calendar` to jeden
rząd `space-between` — „Calendar" wychodzi poza ekran i CAŁA STRONA
dostaje poziomy scroll (zmierzone: scrollWidth 429 przy oknie 390);
· formularz szybkiego dodania: pole tytułu ma `flex: 1`, a natywny
`` `flex: 0 0 auto` — data bierze swoją naturalną
szerokość (~250 px), więc na tytuł zostaje 65 px i widać „Nev".
To najważniejsze pole na tym ekranie.
============================================================================ */
@media (max-width: 767.98px) {
body .hodl-tasks-page__header {
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
body .hodl-tasks-page__title {
flex: 1 1 auto;
margin-bottom: 0;
}
body .hodl-tasks-page__counts,
body .hodl-tasks-page__views {
flex: 1 1 100%;
flex-wrap: wrap;
}
body .hodl-tasks-page__views .side-panel__filter-chip {
flex: 1 1 auto;
justify-content: center;
min-height: 38px;
text-align: center;
}
/* Szybkie dodawanie: tytuł dostaje własny rząd, reszta pod nim. */
body .hodl-tasks-page__quick {
flex-wrap: wrap;
}
body .hodl-tasks-page__quick > input[name="title"] {
flex: 1 1 100%;
min-height: 42px;
}
/* Data i priorytet dzielą drugi rząd tak, żeby zmieściły się w nim także
oba przyciski (opcje + dodaj) — inaczej „+" spada do trzeciego rzędu. */
body .hodl-tasks-page__quick-date {
flex: 1 1 7rem;
min-height: 42px;
min-width: 0;
width: auto;
}
body .hodl-tasks-page__quick-priority {
flex: 1 1 4rem;
min-height: 42px;
min-width: 0;
width: auto;
}
body .hodl-tasks-page__quick .side-panel__quick-add-btn {
min-height: 42px;
min-width: 42px;
}
/* Pasek filtrów i sortowania nad listą. */
body .hodl-tasks-page__toolbar,
body .hodl-tasks-page__selects {
flex-wrap: wrap;
gap: 6px;
}
body .hodl-tasks-page__selects select {
min-height: 40px;
min-width: 0;
}
body .hodl-tasks-page .side-panel__filter-chip {
min-height: 34px;
}
}
@media (max-width: 575.98px) {
/* Board: sześć kolumn po 220 px minimum w siatce 2×3 to ~660 px pustego
miejsca, zanim zobaczysz cokolwiek. Kolumna z zadaniami i tak urośnie. */
body .hodl-board__col {
min-height: 130px;
}
}
/* ============================================================================
9. /review/ — raporty (Daily / Weekly / Monthly review)
----------------------------------------------------------------------------
STAN ZASTANY (390 px): CAŁA STRONA ma poziomy scroll (zmierzone: 426 px).
Winowajcą jest `section.rv-mod` — ma `min-width: auto`, więc rozpycha się
do szerokości najszerszego, niezawijalnego dziecka nagłówka (grupa
PRIVATE/PUBLIC + „All fields:" + cztery ikony = 416 px min-content).
Sam `.rv-mod__head` ma już `flex-wrap: wrap`, ale nie pomaga, dopóki
sekcja nie dostanie `min-width: 0`.
============================================================================ */
@media (max-width: 767.98px) {
/* Prawdziwa przyczyna (znalezione pomiarem, nie na oko): siatka modułów
ma `repeat(auto-fill, minmax(420px, 1fr))`. Przy 378 px kontenera
`auto-fill` i tak tworzy JEDNĄ kolumnę o 420 px — bo minimum z `minmax`
jest twarde. Stąd 420 px sekcji w 390-pikselowym oknie. */
body .rv-page .rv-modules {
grid-template-columns: minmax(0, 1fr);
}
body .rv-page .rv-mod {
min-width: 0;
}
body .rv-page .rv-mod__head,
body .rv-page .rv-mod__meta,
body .rv-page .rv-charts-bar,
body .rv-page .rv-toolbar,
body .rv-page .rv-chart-opts {
flex-wrap: wrap;
min-width: 0;
}
/* Siatki i tabele raportu przewijają się we własnym kontenerze, nie stroną. */
body .rv-page .rv-heatmap__grid,
body .rv-page .rv-table-wrap,
body .rv-page .rv-snap {
-webkit-overflow-scrolling: touch;
max-width: 100%;
overflow-x: auto;
}
body .rv-page .rv-btn,
body .rv-page .rv-tab,
body .rv-page .rv-seg__opt {
min-height: 38px;
}
}
@media (max-width: 575.98px) {
/* --- 6.5 /ta/scanner/ — plakietka „live" rozpychała całą stronę --------
Zmierzone: `.ta-live-chip` ma `white-space: nowrap` i przy tej treści
445 px; razem z `min-width: auto` rodzica dawało scrollWidth 451
przy oknie 390. Na telefonie pozwalam jej się złamać. */
body .ta-head__titles,
body .ta-head {
min-width: 0;
}
body .ta-live-chip {
max-width: 100%;
white-space: normal;
}
body .ta-head__sub {
font-size: 0.76rem;
}
/* Tabela skanera przewija się we własnym kontenerze. */
body .ta-tablewrap,
body .ta-scan-wrap {
-webkit-overflow-scrolling: touch;
max-width: 100%;
overflow-x: auto;
}
}
/* ============================================================================
10. MODALE — wspólne dla całej apki
----------------------------------------------------------------------------
`responsive-mobile.css` robi już to, co najważniejsze: modal na telefonie
dostaje prawie pełną szerokość. Zostaje problem STOPKI.
Zmierzone w modalu predykcji (390 px): stopka ma siedem elementów
(`Delete`, `Move to archive`, `Cancel`, `Save as Main Trend`, do tego
pigułka decyzji, „hot" i meta) o łącznej naturalnej szerokości ~560 px.
Ściśnięte do 390 px łamią napisy na TRZY linie i stopka rośnie do 103 px,
a napisy stają się nieczytelne („Move / to / archive").
DECYZJA: stopka zawija się, a akcja główna dostaje własny, pełny rząd na
samym dole — czyli tam, gdzie kciuk trafia bez przekładania telefonu.
Dokładam też safe-area, żeby przycisk nie siedział na pasku gestów iPhone'a.
============================================================================ */
@media (max-width: 575.98px) {
body .pf-position-form-modal__footer {
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body .pf-position-form-modal__btn {
flex: 1 1 auto;
font-size: 0.8rem;
justify-content: center;
min-height: 42px;
padding: 0 10px;
white-space: nowrap;
}
body .pf-position-form-modal__btn--primary {
flex: 1 0 100%;
order: 9;
}
/* „me-auto" rozpychał stopkę na całą szerokość i wypychał przyciski. */
body .pf-position-form-modal__footer .me-auto {
margin-right: 0 !important;
}
/* Modal na telefonie ma sens tylko jako pełny ekran — inaczej treść
formularza (setupy predykcji potrafią mieć 1 000 px) chowa się
w okienku wewnątrz okienka. */
body .modal-dialog.pf-position-form-modal,
body .modal-dialog.modal-fullscreen-sm-down {
margin: 0;
max-width: 100%;
}
body .modal-body {
-webkit-overflow-scrolling: touch;
}
/* Krzyżyk zamknięcia bywał celem 24 px. */
body .modal .btn-close,
body .modal [class*="__close"] {
min-height: 40px;
min-width: 40px;
}
}
/* ============================================================================
11. /users/ — katalog społeczności
----------------------------------------------------------------------------
Zmierzone: strona ma 19 289 px wysokości przy 49 członkach — czyli ~400 px
na kartę. Winowajcą jest reguła modułu `@media (max-width: 420px)`, która
zwija pięć liczników (followers / following / notes / predictions / wallets)
do DWÓCH kolumn — pięć kafelków w dwóch kolumnach to trzy rzędy, z czego
ostatni półpusty. Trzy kolumny mieszczą się bez problemu (122 px na kafelek)
i dają dwa rzędy. Cztery filtry jeden pod drugim schodzą do siatki 2×2.
============================================================================ */
@media (max-width: 575.98px) {
body .users-directory-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body .users-directory-filters {
display: grid;
gap: 8px;
grid-template-columns: 1fr 1fr;
}
body .users-directory-filters > label,
body .users-directory-filters > select,
body .users-directory-filters > .users-directory-search {
min-width: 0;
}
body .users-directory-search {
grid-column: 1 / -1;
}
body .users-directory-stat {
padding: 6px 4px;
}
}
@media (max-width: 340px) {
/* Poniżej 340 px trzy kolumny zaczynają łamać etykiety — wtedy dwie. */
body .users-directory-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .users-directory-filters {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
/* --- 5.1 Przyciski „New / TV / MIX / pin" w wierszu predykcji ----------
Moduł pokazuje je TYLKO na `:hover` (świadoma decyzja Janka z 2026-08-20:
stale widoczna pinezka robiła szum). Na telefonie hovera nie ma, więc
te funkcje są niedostępne — a przy 360 px dodatkowo wystawały poza ekran
i dawały poziomy scroll CAŁEJ strony (zmierzone: 375 przy oknie 360).
SPRAWDZIŁEM OBA WARIANTY, wybrałem drugi:
(a) pokazać je na stałe — funkcje wracają, ale każdy z 18 wierszy dostaje
cztery przyciski („+ New", „+ TV", pinezka, „MIX"), ikona coina spada
do osobnej linii i lista przestaje się dać czytać. Zrzut obejrzany
i odrzucony;
(b) schować je na telefonie — mapa poziomów zostaje czytelna, a nowy setup
i tak zakłada się polem „New setup — search a coin…" na górze.
Tracimy na telefonie „TV" i pinezkę. To jest do decyzji Janka — opis obu
wariantów w raporcie.
`display: none` na PRZYCISKU niczego nie psuje przy zapisie (to nie jest
pole formularza), a element zostaje w DOM-ie. */
body .predictions-workspace .pred-newbtn {
display: none;
}
body .predictions-workspace .pred-name,
body .predictions-workspace .pred-label {
flex-wrap: wrap;
}
}
/* ============================================================================
12. SZUKAJKA COINÓW W TOPBARZE
----------------------------------------------------------------------------
Zmierzone przy 390 px: lista wyników zaczyna się na 77 px i ma `min-width:
352 px`, więc kończy się na 429 px — prawie 40 px wyników jest poza ekranem
(a `overflow-x: hidden` na liście sprawia, że nie da się tam dojechać).
Szukajka to jedna z dwóch rzeczy, które na telefonie robi się najczęściej,
więc lista dostaje pełną szerokość ekranu i własne przewijanie w pionie,
z zapasem na dolny pasek nawigacji.
============================================================================ */
@media (max-width: 575.98px) {
body .hodl-topbar #search-dropdown.dropdown-menu {
left: 8px;
max-height: calc(100vh - 150px);
max-width: none;
min-width: 0;
overflow-y: auto;
position: fixed;
right: 8px;
top: 62px;
width: auto;
}
body .hodl-topbar #search-dropdown .hodl-topbar-search-result {
min-height: 48px;
}
/* Akcje „Buy / Task / Predict" na wyniku są na desktopie chowane do hovera;
na telefonie hovera nie ma, więc zostają widoczne (moduł już tak robi
poniżej 768 px — tu tylko cel dotykowy). */
body .hodl-topbar #search-dropdown .hodl-topbar-search-action {
min-height: 34px;
min-width: 34px;
}
}
/* ============================================================================
13. DYMKI I POPOVERY — nie mogą wychodzić poza ekran
----------------------------------------------------------------------------
Zmierzone przy 768 px (tablet w pionie): dymek werdyktu TA na `/my/`
i `/coin_view/` (`.cd-ta__info-body`, `width: min(30rem, 78vw)`, `left: 0`)
otwiera się od swojego przycisku i kończy na 939 px — czyli 170 px poza
ekranem. To samo robi „How to read" na `/predictions/`. Przy 390 px problem
jest mniejszy tylko dlatego, że 78vw to wtedy 304 px.
Przykuwam oba do lewej krawędzi ekranu z 8-pikselowym marginesem.
============================================================================ */
@media (max-width: 991.98px) {
body .cd-ta__info-body {
left: auto;
max-width: calc(100vw - 16px);
right: 0;
width: min(30rem, calc(100vw - 16px));
}
/* „How to read" na /predictions/ to panel `position: absolute; left: 0`
zaczepiony o przycisk stojacy w polowie szerokosci karty — przy 768 px
konczy sie na 987 px. Ani `left`, ani `right` nie da sie tu ustawic
sensownie, bo przycisk stoi w srodku. Dlatego na waskim ekranie robie
z niego arkusz przypiety do OKNA, nie do przycisku. */
body .predictions-workspace .pred-helper--head .pred-helper__grid {
grid-template-columns: 1fr;
left: 12px;
max-height: calc(100vh - 170px);
max-width: none;
overflow-y: auto;
position: fixed;
right: 12px;
top: 76px;
width: auto;
}
}
/* ============================================================================
14. /wallets_view/ — BŁĄD ZASTANY: pole „Filter wallets…" wysokie na 260 px
----------------------------------------------------------------------------
Zmierzone przy 390 px: pasek `.wl-toolbar` ma 316 px wysokości, a samo pole
filtra 260 px — czyli ~220 px pustego prostokąta na środku ekranu.
Przyczyna: `.wl-search` ma `flex: 1 1 260px`, napisane dla paska ustawionego
w RZĄD (wtedy 260 px to szerokość bazowa). Reguła modułu
`@media (max-width: 640px)` przełącza pasek na `flex-direction: column`
i nie resetuje bazy — a w kolumnie `flex-basis` działa na WYSOKOŚĆ.
Deklarowane `height: 42px` przegrywa z rozciągnięciem flexa.
⚠️ ODSTĘPSTWO OD MOJEGO ZESTAWU BREAKPOINTÓW — świadome i jedyne.
Ta reguła MUSI mieć próg 640 px, bo dokładnie tam moduł przełącza pasek
na kolumnę. Gdybym użył swoich 575.98, błąd zostałby w przedziale 576–640 px;
gdybym użył 767.98, zepsułbym pasek w rzędzie na 641–768 px.
============================================================================ */
@media (max-width: 640px) {
body .wallets-workspace .wl-search {
flex: 0 0 auto;
height: 42px;
min-width: 0;
width: 100%;
}
}
/* ============================================================================
15. /tasks/calendar — siatka miesiąca
----------------------------------------------------------------------------
Siedem kolumn mieści się przy 390 px bez zmian (47 px na dzień) — tego
nie ruszam. Poprawiam tylko wysokość: komórka ma `height: 92px` (renderuje
się 110), czyli sześć rzędów to 658 px, w większości pustych. Na telefonie
wystarczy 64 px — komórka z zadaniami i tak urośnie, bo `height` na `td`
jest traktowane jak minimum.
============================================================================ */
@media (max-width: 575.98px) {
body .hodl-cal__day {
height: 64px;
padding: 2px;
}
body .hodl-cal__daynum {
font-size: 0.72rem;
}
/* Nagłówki dni tygodnia skracamy do dwóch liter, żeby nie łamały kolumny. */
body .hodl-cal__head th {
font-size: 0.62rem;
padding: 4px 0;
}
}
/* ============================================================================
0c. MARGINESY — uwaga Janka z 2026-08-26
----------------------------------------------------------------------------
ZMIERZONE przy 390 px na `/portfolio/`, od krawędzi ekranu do pierwszej
litery tekstu w karcie:
.content-page padding 6 px
.portfolio-workspace margin 8 px (responsive-mobile.css zwęża
workspace o 16 px i centruje)
.portfolio-workspace padding 10 px
.pf-simple-summary padding 16 px
─────────────────────────────────────
RAZEM 40 px z KAŻDEJ strony
80 px z 390 to **20,5 % ekranu wydane na sam margines**, zanim pojawi się
jakakolwiek treść. Na telefonie to nie jest oddech, tylko strata.
Docelowo: 4 px na zewnątrz + 12 px paddingu karty = 16 px do tekstu.
Odzyskane ~48 px szerokości, czyli 12 % ekranu.
`!important` jest tu konieczne w dwóch miejscach, bo przebijam reguły
z `responsive-mobile.css`, które same go używają (`width: calc(100% - 16px)
!important` na workspace'ach) — czyli dokładnie przypadek, na który brief
pozwala go zostawić.
============================================================================ */
@media (max-width: 575.98px) {
/* --- 0.6a Zewnętrzna rama strony ---------------------------------------
`responsive-mobile.css` ma tu `!important`, więc bez niego nie da się. */
body .content-page {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* --- 0.6b Workspace'y: koniec zwężania i centrowania -------------------- */
body .portfolio-workspace,
body .predictions-workspace,
body .wallets-workspace,
body .users-directory,
body .users-directory-page {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
/* --- 0.6c Karty modułów: 16-20 px paddingu → 12 px ---------------------
Klasa jest tu POWTÓRZONA (`.pf-simple-summary.pf-simple-summary`)
celowo. Moduły trafiają w te karty selektorami z dwiema klasami
(np. `.pf-simple-overview .pf-simple-summary`), a pojedyncza klasa
z prefiksem `body` ma niższą specyficzność i przegrywa — sprawdzone
pomiarem, padding zostawał na 16 px. Powtórzenie klasy podnosi
specyficzność bez sięgania po `!important`. */
body .pf-simple-summary.pf-simple-summary,
body .pf-simple-filterbar.pf-simple-filterbar,
body .pf-page-header.pf-page-header,
body .pf-explorer-header.pf-explorer-header,
body .pf-simple-card.pf-simple-card,
body .pf-panel.pf-panel,
body .pf-empty-state.pf-empty-state,
body .pred-card__head.pred-card__head,
body .pred-toolbar.pred-toolbar,
body .ta-panel.ta-panel,
body .rv-mod__head.rv-mod__head,
body .card > .card-body,
body .users-directory-card.users-directory-card {
padding-left: 12px;
padding-right: 12px;
}
/* Wiersze list wewnątrz kart — te same 12 px, żeby kolumny się zgadzały. */
body .pf-simple-asset-card.pf-simple-asset-card,
body .wl-card.wl-card,
body .side-panel__section.side-panel__section {
padding-left: 12px;
padding-right: 12px;
}
}
/* ============================================================================
0d. TOPBAR — pole „Search coins" urwane w połowie (uwaga Janka 2026-08-26)
----------------------------------------------------------------------------
ZMIERZONE przy 390 px — dwa cudze pliki mówią sprzeczne rzeczy o tym samym
polu i nikt tego nie zestawił:
responsive-mobile.css .navbar-custom .app-search max-width: 150px
hodl-nav.css .hodl-topbar .app-search .form-control
min-width: 11rem (176 px)
Pole jest więc o 26 px SZERSZE niż opakowanie, w którym siedzi, a opakowanie
przycina (`overflow-x: clip`). Efekt: prawy, zaokrąglony koniec pola jest
ścięty w połowie — dokładnie to, co widać na zrzucie.
Zamiast łatać jedną z tych liczb, zdejmuję OBIE i pozwalam szukajce zająć
miejsce, które faktycznie zostało po ikonach — na telefonie to i tak
najczęściej używane pole w całym pasku.
============================================================================ */
@media (max-width: 991.98px) {
/* Lewa grupa paska (logo · przełączniki · szukajka) ma rosnąć. */
body #hodl-topbar .topbar > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
body #hodl-topbar .app-search {
flex: 1 1 auto;
max-width: none;
min-width: 0;
}
body #hodl-topbar .app-search .input-group {
width: 100%;
}
body #hodl-topbar .app-search .form-control {
min-width: 0;
width: 100%;
}
/* Ikony po prawej nie mogą się kurczyć, bo to cele dotykowe. */
body #hodl-topbar .hodl-topbar-menu {
flex: 0 0 auto;
}
}
/* ============================================================================
16. /decisions/ — ekran decyzji (checklista → kalkulator → werdykt)
----------------------------------------------------------------------------
RUNDA 2. W raporcie z rundy 1 napisałem, że to „najbardziej prawdopodobne
miejsce, gdzie coś jeszcze się rozjeżdża", ale nie mogłem tam wejść — brief
zabraniał zapisu do wspólnej bazy, a konto testowe nie miało żadnej decyzji.
Teraz mogę i miałem rację, choć nie co do wszystkiego:
· CHECKLISTA jest zrobiona dobrze — sekcje się zwijają, przyciski ✓/✗/–
są po prawej i da się w nie trafić. Nie ruszam.
· KALKULATOR RYZYKA się sypie. Zmierzone przy 390 px:
`.dec-levels` ma `grid-template-columns: 1fr auto` i jest użyte
CZTERY RAZY. Kolumna `auto` dopasowuje się do pola, a pola są różne
(szerokie z dystansami vs wąskie liczbowe), więc KAŻDY WIERSZ LICZY
WŁASNY PODZIAŁ:
Entry 87 / 251
Stop loss 188 / 150
Risk % of portfolio 248 / 90
Leverage … 153 / 185
Cztery wiersze, cztery różne pozycje pól. Na desktopie kontener jest
na tyle szeroki, że to nie kłuje; przy 390 px wygląda jak zepsute.
ROZWIĄZANIE: na telefonie jedna kolumna — etykieta nad polem, pole na całą
szerokość. Standardowy układ formularza mobilnego, przy okazji naprawia
ucięty select „Entry order" i „Holding time (days, for funding)", które
łamało się na dwie linie obok maleńkiego pola.
============================================================================ */
@media (max-width: 575.98px) {
/* --- 16.0 Siatka strony nie może być szersza niż ekran -----------------
Zmierzone przy 360 px: `.dec-grid` liczy kolumnę na 387 px w kontenerze
o 352 px, więc panel wystaje 14 px — i to w OBIE strony (x = -14).
Przyczyna: `grid-template-columns: 1fr` to w praktyce `minmax(auto, 1fr)`,
a minimum `auto` to min-content zawartości. Wystarczy jedna nierozrywalna
rzecz w środku (tu: tabela scenariuszy z `white-space: nowrap`
w nagłówkach) i cała kolumna rozpycha się ponad ekran.
Ta sama pułapka co na `/review/` w rundzie 1. `minmax(0, 1fr)` mówi
„kolumna może być węższa niż jej zawartość" — a zawartość, która się nie
mieści, dostaje własne przewijanie niżej. */
body .dec-grid {
grid-template-columns: minmax(0, 1fr);
}
body .dec-card,
body .dec-card__head,
body .dec-card__body {
min-width: 0;
}
/* Tabela scenariuszy ma nagłówki `nowrap` (świadomie — „10.44 : 1" nie może
się łamać). Zamiast tego przewija się we własnym kontenerze. */
body .dec-rr-table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
/* --- 16.1 Pola kalkulatora: etykieta NAD polem ------------------------- */
body .dec-levels {
gap: 4px;
grid-template-columns: minmax(0, 1fr);
}
body .dec-levels label {
font-size: 0.8rem;
}
body .dec-levels input,
body .dec-levels select,
body .dec-levels .dec-withdist {
min-height: 42px;
width: 100%;
}
/* ⚠️ `!important` KONIECZNE i uzasadnione: pola liczbowe kalkulatora mają
w szablonie STYL INLINE `max-width: 90px` (a select typu zlecenia 185 px).
Styl inline bije każdy selektor — to dokładnie ten przypadek, na który
brief pozwala zostawić `!important`. Bez tego etykieta idzie nad pole,
ale samo pole zostaje 90-pikselowym paskiem, a select dalej ucina
„Limit — maker 0.02%". */
body .dec-levels input,
body .dec-levels select {
max-width: none !important;
}
/* --- 16.2 Pasek „Take from my prediction" ------------------------------
Trzy elementy w jednym rzędzie (select horyzontu, przycisk pobrania,
Edit) ściskały się tak, że napis przycisku łamał się na dwie linie. */
body .dec-predbar {
flex-wrap: wrap;
}
body .dec-predbar select {
flex: 1 1 8rem;
max-width: none;
min-height: 40px;
}
body .dec-predbar > button[data-dec-frompred] {
flex: 1 1 100%;
min-height: 40px;
order: 3;
}
body .dec-predbar > button[data-dec-editpred] {
min-height: 40px;
}
/* --- 16.3 Nagłówki kart: tytuł nie łamie się na dwie linie -------------
„Risk / Reward" schodziło do dwóch linii, bo obok stoi wartość portfela
i `space-between` ściskał tytuł. Dwa rzędy zamiast walki o szerokość. */
body .dec-card__head {
align-items: flex-start;
flex-wrap: wrap;
gap: 2px 10px;
padding-left: 12px;
padding-right: 12px;
}
body .dec-card__title {
flex: 1 1 auto;
}
body .dec-card__body {
padding-left: 12px;
padding-right: 12px;
}
/* --- 16.4 Wiersze wyniku: długa etykieta wchodziła na wartość ----------
„Risk on stop loss incl. fees, 0.1% slippage" + wartość w jednym rzędzie
z `space-between` — przy 390 px liczba nachodziła na tekst. */
body .dec-result__row {
column-gap: 12px;
flex-wrap: wrap;
row-gap: 2px;
}
body .dec-result__label {
flex: 1 1 auto;
min-width: 0;
}
/* --- 16.5 Cele dotykowe na checkliście --------------------------------- */
body .dec-step__actions button,
body .dec-card .btn-sm {
min-height: 38px;
}
/* --- 16.6 Pewność: pięć kropek po 20 px w pasku 124 px -----------------
Zmierzone: `.dec-confidence label` ma dokładnie tyle, co ikona w środku,
czyli 20×20 px, a kropek jest pięć obok siebie. Palcem nie da się trafić
w konkretną — a to jest ocena, którą się klika przy KAŻDEJ decyzji.
Powiększam `label` (to on jest celem kliknięcia; `input` jest ukryty
i obsługiwany zdarzeniem `change` na grupie), nie samą ikonę. */
body .dec-confidence {
gap: 2px;
}
body .dec-confidence label {
align-items: center;
display: inline-flex;
font-size: 24px;
justify-content: center;
min-height: 42px;
min-width: 42px;
}
}
/* ============================================================================
17. /tasks/ — lista z treścią (agenda runda 2, pkt 2)
----------------------------------------------------------------------------
W rundzie 1 widziałem tę stronę tylko PUSTĄ — konto testowe nie miało zadań.
Z treścią wychodzi rzecz, której na pustym ekranie nie da się zobaczyć:
wiersz zadania to siatka z nazwanymi obszarami
"logo title chips actions"
"logo anchors deadline actions"
o kolumnach `40px 77.5px 168.5px 0px`. Kolumna TYTUŁU dostaje 77 px,
a chipy statusu i priorytetu 169 px — czyli dwa razy więcej niż treść,
po którą się na tę stronę wchodzi. Efekt przy 390 px: „Usta…", „Spra…",
„Prz…", „Zamk…" — siedem zadań, z których żadnego nie da się odczytać.
ROZWIĄZANIE: tytuł dostaje własny rząd na pełną szerokość, chipy i termin
schodzą pod niego i dzielą się jednym rzędem. Wiersz rośnie o ~22 px,
ale tytuł przestaje być pięcioma znakami i wielokropkiem.
============================================================================ */
@media (max-width: 575.98px) {
body .hodl-tasks-page__list .side-panel__item {
grid-template-areas:
"logo title title actions"
"logo anchors anchors actions"
"logo chips deadline actions";
grid-template-columns: 40px minmax(0, 1fr) minmax(0, auto) auto;
}
/* Tytuł ma się łamać, a nie uciekać w wielokropek — mamy na niego rząd. */
body .hodl-tasks-page__list .side-panel__task-title,
body .hodl-tasks-page__list .hodl-task__title-link {
overflow: visible;
white-space: normal;
}
body .hodl-tasks-page__list .hodl-task__title-link {
display: inline;
line-height: 1.35;
}
/* Pusty obszar kotwic nie ma zabierać rzędu. */
body .hodl-tasks-page__list .side-panel__task-category:empty {
display: none;
}
}
/* ============================================================================
18. /notifications/ i /trash/ z treścią (agenda runda 2, pkt 2)
----------------------------------------------------------------------------
W rundzie 1 obie strony widziałem tylko puste i zapisałem to uczciwie jako
„nieprzetestowane". Z treścią wychodzi jedna rzecz, której na pustym
ekranie nie widać: `.hodl-notif-page` nie ma własnego paddingu poziomego,
więc po ściśnięciu marginesów (sekcja 0c) jasny przycisk „Mark all as read"
i tła wierszy dochodzą na 4 px do krawędzi ekranu i czytają się jak ucięte.
Same wiersze powiadomień i wpisy kosza są zrobione dobrze — ikona, treść
w dwóch liniach, akcje po prawej, cele dotykowe w normie. Nie ruszam ich.
============================================================================ */
@media (max-width: 575.98px) {
body .hodl-notif-page {
padding-left: 8px;
padding-right: 8px;
}
/* Nagłówek strony: tytuł i „Mark all as read" mają zostać w jednym rzędzie,
ale z oddechem od krawędzi. */
body .hodl-notif-page__header {
align-items: center;
gap: 8px;
}
}
/* ============================================================================
19. Edytor notatki (agenda runda 2, pkt 3)
----------------------------------------------------------------------------
Rozwinięty edytor jest zrobiony dobrze i układ zostawiam: tytuł, pasek
formatowania, pole treści, „Photos / Video link", a na dole prywatność,
„+ Task", opcje i duży „Post". Zero przepełnień przy 390 px.
Poprawiam wyłącznie CELE DOTYKOWE — zmierzone:
· przyciski paska formatowania Quilla (B, I, listy, U, S): 28 × 24 px,
jeden obok drugiego. To biblioteka, ale styl ładuje się przede mną,
więc wystarcza specyficzność, bez `!important`;
· chipy kategorii: 84 × 25 px.
Uwaga na przyszłość dla kogokolwiek, kto będzie to testował skryptem:
kompozytor rozwija się na `mousedown`, NIE na `click`. Syntetyczne
`element.click()` go nie otworzy — trzeba prawdziwego kliknięcia myszą.
============================================================================ */
@media (max-width: 575.98px) {
/* Pasek Quilla jest w CAŁEJ apce, nie tylko w notatkach — zmierzone te same
28 × 24 px na `/indicators/new`, w polu „Why" na ekranie decyzji i w
raportach. Reguła jest więc ogólna, żeby nie powielać jej per moduł. */
/* ⚠️ Specyficzność: Quill trafia w te przyciski selektorem
`.ql-snow.ql-toolbar button` (DWIE klasy), więc `body .ql-toolbar button`
(jedna klasa) przegrywa — sprawdzone who-wins.js, zostawało 28 px.
Dlatego motyw jest w selektorze. `bubble` obok `snow`, bo edytor
„Why" na ekranie decyzji używa tego drugiego. */
body .ql-snow.ql-toolbar button,
body .ql-snow .ql-toolbar button,
body .ql-bubble.ql-toolbar button,
body .ql-bubble .ql-toolbar button,
body .ql-toolbar button,
body .ql-toolbar .ql-picker-label {
height: 40px;
padding: 6px;
width: 40px;
}
body .ql-toolbar {
align-items: center;
display: flex;
flex-wrap: wrap;
}
body .note-composer .note-cat-chip {
min-height: 34px;
}
/* „Photos" i „Video link" są już 38 px — dobijam do 40 dla równości rzędu. */
body .note-composer .note-composer__media-btn {
min-height: 40px;
}
}
/* ============================================================================
20. /account/settings/ i /indicators/new (agenda runda 2, pkt 4 i 5)
----------------------------------------------------------------------------
Oba formularze są zrobione dobrze: pola na pełną szerokość, etykiety nad
polami, podpowiedzi czytelne, wysokość pól 38–40 px. Nie przebudowuję ich.
Jedyne, co poprawiam, to dwa drobiazgi zmierzone przy 390 px:
· `.account-settings__divider` to `display: flex` z nagłówkiem i opisem
w jednym rzędzie. Przy 390 px nagłówek dostaje 82 px i „Change password"
łamie się na dwie linie obok opisu. Dwa rzędy czytają się lepiej.
· Pasek Quilla — patrz sekcja 19, reguła jest wspólna dla całej apki.
============================================================================ */
@media (max-width: 575.98px) {
body .account-settings__divider {
align-items: flex-start;
flex-direction: column;
gap: 2px;
}
}
/* ============================================================================
21. Modal zadania — cele dotykowe stopki
----------------------------------------------------------------------------
USTALENIE, które zmienia ocenę wcześniejszego znaleziska: skróty w wierszu
zadania (Pin / Hide task / Delete) mają `opacity: 0` i pokazują się tylko
na hover, więc na telefonie są niewidoczne. NIE odsłaniam ich — bo te same
trzy akcje są w stopce MODALA zadania, który na telefonie otwiera się
tapnięciem w tytuł i działa poprawnie. Skróty w wierszu to wygoda desktopu
z pełnowartościową alternatywą, a nie funkcja utracona na telefonie.
Poprawiam za to stopkę modala — zmierzone: Save 58×32, Pin 54×27,
Hide 62×27, kasowanie **22×30**, „All tasks" 58×17. Wszystko poniżej progu,
a kasowanie jest akcją destrukcyjną i najmniejszym celem z całej piątki.
============================================================================ */
@media (max-width: 575.98px) {
body .hodl-task-modal__footer {
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
body .hodl-task-modal__footer .btn,
body .hodl-task-modal__footer .hodl-task-modal__toggle,
body .hodl-task-modal__footer .hodl-task__action-btn {
min-height: 40px;
min-width: 40px;
}
body .hodl-task-modal__footer .hodl-task-modal__all {
min-height: 40px;
display: inline-flex;
align-items: center;
}
}
/* ============================================================================
22. EDYTOR ZDJĘĆ (`.hnme`) — CELE DOTYKU
----------------------------------------------------------------------------
Ten edytor jest WSPÓLNY: otwierają go notatki, predykcje i modal zgłoszeń
(„Report a bug", v348). Jedna poprawka działa więc w trzech miejscach.
Samo działanie jest OK — sprawdzone po zmianie na Pointer Events (v347):
warstwa rysowania `.hnme__draw` ma `touch-action: none`, więc przeciąganie
palcem rysuje, a nie przewija stronę. Kadrowanie `.hnme__crop` tak samo.
(Płótno pod spodem, `.hnme__canvas`, ma `touch-action: auto`, ale leży POD
warstwą rysowania i palec nigdy na nie nie trafia — to nie jest błąd.)
Problem jest tylko z ROZMIARAMI. Zmierzone przy 390 px w zakładce Draw:
17 celów poniżej 38 px, w tym próbki koloru **22 × 22 px**. Palec ma ~9 mm,
czyli około 40 px — w kółko o średnicy 22 px trzeba celować.
Miejsce jest: rząd `.hnme__row` ma 324 px i `flex-wrap: wrap`, a sześć
próbek po 38 px z odstępem 4,8 px zajmie 252 px. Mieści się bez zawijania.
============================================================================ */
@media (max-width: 991.98px) {
/* Próbki koloru: 22 → 38 px. Powiększam samo kółko, a nie niewidoczny
obszar wokół niego, bo te kółka trzeba też ZOBACZYĆ. Obramowanie
`.is-active` (biały pierścień) działa dalej bez zmian. */
body .hnme__color {
width: 38px;
height: 38px;
}
/* Zakładki Crop/Draw (33 px) i przełączniki Pen/Text oraz proporcje
kadru Free / 1:1 / 4:5 / 16:9 (32 px). */
body .hnme__tabs button,
body .hnme__seg button {
min-height: 40px;
padding-inline: 0.9rem;
}
/* Przyciski stopki edytora: Cancel / Skip editing / Add photo (37 px). */
body .hnme__btn {
min-height: 40px;
}
/* Suwaki: grubość pędzla (`.hnme__pensize`, 90 × 16 px) oraz jasność,
kontrast i nasycenie w zakładce Crop. Sam uchwyt jest większy niż tor,
ale obszar reagujący na dotyk ma wysokość toru — 16 px to za mało,
żeby złapać go palcem za pierwszym razem. Podnoszę do 40 px i daję
suwakowi grubości pełną szerokość, bo 90 px to bardzo krótki tor. */
body .hnme input[type="range"] {
min-height: 40px;
}
body .hnme__pensize {
width: 100%;
flex: 1 1 auto;
}
/* Krzyżyki zamknięcia: 32 × 32 w edytorze, 29 × 32 w modalu zgłoszeń.
To najczęściej dotykany przycisk w całym oknie i najłatwiej go chybić,
bo siedzi w rogu. */
body .hnme__x,
body .hnvm__x,
body .fb-modal__x {
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ============================================================================
30. RUNDA 5 (noc 2026-09-03/04) — WSPÓLNE KLOCKI TELEFONU 2.0
----------------------------------------------------------------------------
Styl „jak apki giełdowe" (decyzja Janka): ciemno, kompaktowo, zakładki
i chipy zamiast ramek. Trzy klocki używane przez kilka stron:
· `.hodl-m-tabs` — pasek zakładek budowany przez hodl-mobile.js
(`makeTabs`), jedna sekcja na raz; elementy spoza aktywnej zakładki
dostają `.hodl-m-tab-hidden`;
· `.hodl-m-chip` — pigułka akcji w nagłówkach;
· szukajka topbara po otwarciu lupy — lista wyników POD polem (moja stara
sekcja 12 sadzała ją na `top: 62px`, czyli na polu).
============================================================================ */
@media (max-width: 767.98px) {
body .hodl-m-tab-hidden {
display: none !important;
}
body .hodl-m-tabs {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
margin: 0 0 10px;
border-bottom: 1px solid var(--ct-border-color, #26303f);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body .hodl-m-tabs::-webkit-scrollbar {
display: none;
}
body .hodl-m-tabs__tab {
flex: 1 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 12px;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
color: var(--ct-secondary-color, #8593a8);
font: inherit;
font-size: .88rem;
font-weight: 600;
white-space: nowrap;
}
body .hodl-m-tabs__tab i {
font-size: 16px;
line-height: 1;
}
body .hodl-m-tabs__tab.is-active {
color: var(--ct-emphasis-color, #e7edf6);
border-bottom-color: var(--ct-primary, #3aa0f7);
}
body .hodl-m-tabs__tab:active {
opacity: .7;
}
body .hodl-m-chip {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--ct-border-color, #26303f);
border-radius: 999px;
background: var(--ct-tertiary-bg, #1a2433);
color: var(--ct-body-color, #e7edf6);
font: inherit;
font-size: .78rem;
font-weight: 600;
white-space: nowrap;
}
}
@media (max-width: 991.98px) {
body.hodl-m-search-open #hodl-topbar #search-dropdown.dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
width: 100%;
max-height: calc(100vh - 150px);
}
}
/* ============================================================================
31. FEED 2.0 — `/`, `/my_page/`, `/following/`, feed na `/my/`
----------------------------------------------------------------------------
Decyzja Janka (formularz 2026-09-03): „przeprojektuj górne okienko search
notes + filtry. ma być przycisk rozwijalny w jednej linii z community
following mine + drobne zmiany wg twojego uznania (ułożenie przycisków,
odstępy, otoczki)". Karty: widoczne serce, komentarze, pin/oko/task;
link pod menu „…" (na telefonie chowam samą ikonę linku).
Układ: JEDEN RZĄD = zakładki Community / Following / Mine (podkreślenie
zamiast pigułek, jak w apkach giełdowych) + przycisk z lupą po prawej
(`.hodl-m-feedtools`, wstrzykuje hodl-mobile.js). Tap → pod spodem
wyjeżdża rząd: pole „Search notes…" + trzy filtry (kategorie, coiny, oko).
Gdy filtr albo szukanie jest aktywne, przycisk ma kropkę i rząd jest
otwarty od razu. Nadpisuje sekcję 3b (ta zostaje dla 576–767 px jako
zapas na wypadek braku JS: bez przycisku narzędzia są po prostu widoczne).
============================================================================ */
@media (max-width: 767.98px) {
body .feed-header {
padding: 2px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body .feed-header__inner {
flex-wrap: wrap;
align-items: center;
row-gap: 4px;
column-gap: 6px;
}
body .feed-header__leading {
flex: 1 1 auto;
order: 1;
min-width: 0;
gap: 8px;
}
body .feed-header__tabs {
flex: 1 1 auto;
order: 1;
justify-content: flex-start;
gap: 0;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--ct-border-color, #26303f);
}
body .feed-header__tabs::-webkit-scrollbar {
display: none;
}
body .feed-header__leading .feed-header__tabs {
border-bottom: 0;
}
body .feed-header__tab {
flex: 0 0 auto;
min-height: 42px;
padding: 0 11px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
margin-bottom: -1px;
background: transparent;
box-shadow: none;
color: var(--ct-secondary-color, #8593a8);
font-size: .9rem;
}
body .feed-header__tab.is-active {
background: transparent;
color: var(--ct-emphasis-color, #e7edf6);
border-bottom-color: var(--ct-primary, #3aa0f7);
}
body .feed-header__tab.is-active i {
color: var(--ct-primary, #3aa0f7);
}
body .hodl-m-feedtools {
order: 2;
flex: 0 0 auto;
position: relative;
width: 40px;
height: 40px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--ct-secondary-color, #8593a8);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
body .hodl-m-feedtools.is-on {
color: var(--ct-primary, #3aa0f7);
background: var(--ct-tertiary-bg, #1a2433);
}
body .hodl-m-feedtools__dot {
position: absolute;
top: 7px;
right: 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ct-primary, #3aa0f7);
}
/* narzędzia: bez JS widoczne (zapas), z JS — tylko po otwarciu */
body .feed-header__inner:has(.hodl-m-feedtools) .feed-header__tools {
display: none;
}
body .feed-header.is-hodl-m-tools-open .feed-header__inner .feed-header__tools {
display: flex;
}
body .feed-header__tools {
flex: 1 1 100%;
order: 3;
gap: 6px;
padding: 6px 0 4px;
justify-content: flex-start;
}
body .feed-header__search {
flex: 1 1 auto;
max-width: none;
}
body .feed-header__search .form-control {
height: 40px;
border-radius: 10px;
}
body .feed-header__search .btn {
min-width: 40px;
}
body .feed-header__icon-btn {
min-width: 40px;
min-height: 40px;
border-radius: 10px;
background: var(--ct-tertiary-bg, #1a2433);
}
/* composer „Write a note…" — płasko, bez ciężkiej ramki */
body .note-composer {
border-radius: 12px;
}
/* karty notatek: oddzielone kreską, nie ramką; akcje jako lekkie ikony */
body #notes-feed .note-card {
border: 0;
border-bottom: 1px solid var(--ct-border-color, #26303f);
border-radius: 0;
margin-bottom: 0;
padding: 12px 2px 6px;
background: transparent;
}
body #notes-feed .note-card--private,
body #notes-feed .note-card--public {
padding-left: 10px;
border-left: 3px solid transparent;
}
body #notes-feed .note-card--private {
border-left-color: rgba(241, 85, 108, .55);
}
body #notes-feed .note-card--public {
border-left-color: rgba(10, 207, 151, .5);
}
body #notes-feed .note-card:hover {
border-color: var(--ct-border-color, #26303f);
background: transparent;
}
body #notes-feed .note-card__avatar img,
body #notes-feed .note-card__avatar-cat {
width: 36px;
height: 36px;
}
body #notes-feed .note-card__actions {
gap: 2px;
margin-top: 6px;
}
body #notes-feed .note-card__action {
border: 0;
border-radius: 10px;
padding: 0 8px;
min-height: 36px;
font-size: .82rem;
}
body #notes-feed .note-card__action--icon-only {
min-width: 36px;
padding: 0 6px;
justify-content: center;
}
/* link (kopiuj adres) — decyzja Janka: nie na karcie */
body #notes-feed .note-card__action--icon-only:has(> i.ri-link) {
display: none;
}
body #notes-feed .note-card__action--hover {
opacity: 1;
}
body #notes-feed .note-card__actions-end {
gap: 0;
}
}
@media (max-width: 575.98px) {
body .feed-header__tab i {
display: none;
}
body .feed-header__leading .feed-header__tab i {
display: inline-block;
}
}
/* ============================================================================
32. STRONA COINA 2.0 — `/my/` (runda 5)
----------------------------------------------------------------------------
Decyzja Janka: „wszystkie informacje mają być jak do tej pory, ale inaczej
rozmieszczone, schowane. user po wejściu musi na pewno widzieć minimum
pierwszą notatkę. może jakieś zakładki". Wybrane w formularzu: nagłówek
JEDNA LINIA (ikona, symbol, cena, 24h, decyzja, Buy) + zakładki
Notes (domyślna) / Status i poziomy / Market / Tasks.
Jak, bez ruszania szablonu: trzy kolumny Bootstrapa i ich `aside`
dostają `display: contents`, więc SEKCJE paneli stają się bezpośrednimi
elementami flexa `#feed-layout-row` i da się je ułożyć `order`-em:
nagłówek coina (1) → pasek zakładek (2) → treść aktywnej zakładki.
hodl-mobile.js znakuje sekcje `data-hodl-m-sec` i chowa te spoza
aktywnej zakładki (`.hodl-m-tab-hidden`). W zakładce Market nagłówek
rozwija się do pełnej postaci (nazwa, gwiazdki, 1h/7d/30d, MC/FDV/supply,
linki, Coin page) — nic nie ginie, tylko zmienia miejsce.
Nadpisuje sekcję 3 (kolejność paneli) w zakresie ≤767,98 px.
============================================================================ */
@media (max-width: 767.98px) {
body #feed-layout-row[data-task-anchor-type="coin"] > #left-panel,
body #feed-layout-row[data-task-anchor-type="coin"] > #right-panel,
body #feed-layout-row[data-task-anchor-type="coin"] > #middle-panel,
body #feed-layout-row[data-task-anchor-type="coin"] > #left-panel > .side-panel,
body #feed-layout-row[data-task-anchor-type="coin"] > #right-panel > .side-panel {
display: contents !important;
}
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec],
body #feed-layout-row[data-task-anchor-type="coin"] > .hodl-m-tabs {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
}
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec] {
margin-bottom: 10px;
}
/* kolejność: nagłówek → zakładki → treść */
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="head"] { order: 1; }
body #feed-layout-row[data-task-anchor-type="coin"] > .hodl-m-tabs { order: 2; margin-top: 2px; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="mid"] { order: 3; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="notes"] { order: 10; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="status"] { order: 20; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="levels"] { order: 21; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="chart"] { order: 30; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec^="right"] { order: 31; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec^="left"] { order: 33; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="tasks"] { order: 40; }
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="notes"]#notes-feed,
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="notes"]#feed-empty,
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="notes"]#feed-sentinel,
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="notes"]#feed-loader {
order: 12;
margin-bottom: 0;
}
/* --- nagłówek coina: jedna linia (poza zakładką Market) ------------------ */
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
padding: 6px 4px 4px;
margin-bottom: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info > .coin-info__full-name,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info > .coin-info__stars,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info > .coin-info__mc,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info > .coin-info__links,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__rank-cell,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .mt-coin-labels,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .mt-coin-verdict,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__changes .side-panel__chip:not(:nth-child(2)),
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__action-btn:not(.position-new-link) {
display: none;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__header {
flex: 0 1 auto;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__identity-row,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__mt-coin-cell,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__symbol-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__logo-img {
width: 30px;
height: 30px;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__symbol-text {
font-size: 1.05rem;
font-weight: 800;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__price-block {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__price-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__price {
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__changes {
margin: 0;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__actions {
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 0;
display: flex;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__action-btn.position-new-link {
min-height: 36px;
padding: 0 14px;
border-radius: 10px;
font-weight: 700;
}
body #feed-layout-row[data-task-anchor-type="coin"] .hodl-m-decision.is-set {
border-color: rgba(255, 188, 0, .45);
background: rgba(255, 188, 0, .12);
color: #ffbc00;
}
body #feed-layout-row[data-task-anchor-type="coin"][data-hodl-m-tab="market"] .hodl-m-decision {
display: none;
}
/* w zakładce Market nagłówek jest pełny — jak dotąd, tylko bez ramki karty */
body #feed-layout-row[data-task-anchor-type="coin"][data-hodl-m-tab="market"] .coin-info {
margin-bottom: 10px;
}
/* panele sekcji: płasko, jak reszta telefonu 2.0 */
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="status"],
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="levels"],
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec="tasks"],
body #feed-layout-row[data-task-anchor-type="coin"] [data-hodl-m-sec^="right"] {
border-radius: 12px;
}
}
/* 32b. Poprawki po pierwszym pomiarze (390 px): pełna nazwa, gwiazdki i MC/FDV
siedzą WEWNĄTRZ `.coin-info__header` / `.coin-info__price-block`, nie jako
bezpośrednie dzieci; sam nagłówek kurczył się do 42 px i symbol „BTC" miał
4 px szerokości. Zmierzone: header 42×87, price-block 245×80. */
@media (max-width: 767.98px) {
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__full-name,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__stars,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .coin-info__mc {
display: none;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__header {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
width: auto;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .mt-coin-cell__body,
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info .mt-coin-cell__lead {
width: auto;
min-width: 0;
flex: 0 0 auto;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__symbol-text {
white-space: nowrap;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__price-block {
flex-direction: row;
align-items: center;
gap: 6px 8px;
}
body #feed-layout-row[data-task-anchor-type="coin"]:not([data-hodl-m-tab="market"]) .coin-info__price-block > * {
margin: 0;
}
/* feed: pasek zakładek bez ciemnej pigułki w tle; wariant coinowy
(`.feed-header__tabs--coin`) ma w cudzym pliku wyższą specyficzność */
body .feed-header__tabs,
body .feed-header__tabs--coin {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
}
body .feed-header__tabs--coin .feed-header__tab,
body .feed-header__tabs--coin .feed-header__tab.is-active {
background: transparent;
border-radius: 0;
box-shadow: none;
}
body .feed-header__tabs--coin .feed-header__tab.is-active {
color: var(--ct-emphasis-color, #e7edf6);
border-bottom-color: var(--ct-primary, #3aa0f7);
}
}
/* ============================================================================
33. PORTFOLIO 2.0 — `/portfolio/` (runda 5)
----------------------------------------------------------------------------
Decyzja Janka: „duże zmiany"; widoczne WSZYSTKIE 4 karty (Net worth + P&L,
Wallets + pasek podziału, wykres historii, lista aktywów); pasek akcji
TYLKO „Add position"; długie strony = zakładki.
Układ: nagłówek (awatar + Portfolio + Add position w jednym rzędzie)
→ karta Net worth → zakładki Assets / Wallets / History (hodl-mobile.js).
Przełącznik Simple/Pro schowany; jeśli user ma zapisany tryb Pro, serwer
renderuje Pro i przełącznik ZOSTAJE widoczny (żeby dało się wrócić).
Nadpisuje część sekcji 1b.2 (pasek akcji jako scroller) dla ≤767,98 px.
============================================================================ */
@media (max-width: 767.98px) {
body .portfolio-workspace .pf2-topbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 0 8px;
}
body .portfolio-workspace .pf2-topbar__id {
flex: 1 1 auto;
min-width: 0;
width: auto;
}
body .portfolio-workspace .pf2-topbar__actions {
flex: 0 0 auto;
width: auto;
overflow: visible;
padding: 0;
margin: 0;
gap: 8px;
-webkit-mask-image: none;
mask-image: none;
}
body .portfolio-workspace .pf2-topbar__actions > *:not([data-open-add-panel]) {
display: none;
}
body .portfolio-workspace[data-active-mode="pro"] .pf2-topbar__actions .pf-mode-switch {
display: inline-flex;
}
body .portfolio-workspace .pf2-topbar__actions .pf-compact-action--primary {
min-height: 40px;
padding: 0 14px;
border-radius: 10px;
font-weight: 700;
}
/* Net worth: duża liczba, jak w apce giełdowej */
body .portfolio-workspace .pf2-metrics {
border-radius: 14px;
}
body .portfolio-workspace .pf2-metric--networth strong {
font-size: 1.7rem;
letter-spacing: -.01em;
}
/* zakładki bezpośrednio pod kartą metryk */
body .portfolio-workspace > .hodl-m-tabs {
margin: 12px 0 10px;
}
/* szyna (Wallets / split / History) na całą szerokość, bez siatki desktopu */
body .portfolio-workspace .pf2-simple-layout {
display: block;
}
body .portfolio-workspace .pf2-simple-rail,
body .portfolio-workspace .pf2-simple-main {
width: 100%;
max-width: none;
}
body .portfolio-workspace .pf2-simple-rail > * {
margin-bottom: 10px;
}
body .portfolio-workspace .pf2-card--history {
border-radius: 12px;
}
}
/* ============================================================================
34. COINS 2.0 — `/my_table/` (runda 5)
----------------------------------------------------------------------------
Sterowanie: pigułki My List / All / Hot / Rating / Position / Tasks WIDOCZNE
jako przewijany rząd + chip „Filters" (hodl-mobile.js, przyklejony do prawej
krawędzi) rozwijający resztę (screener, narzędzia, tryby, Views).
Nadpisuje 2.1 (pigułki zawijane) i 2b (co znika po zwinięciu) dla ≤767,98 px.
⛔ 34.1 USUNIĘTE 2026-09-09 (Janek, agent `my_table`) — tu było twarde
`display: none` na 16 kolumnach poniżej 767,98 px. Powstało w rundzie 5, ZANIM
moduł dostał widok „Phone" (przełącznik widoków, `helpers/user_settings.py
MY_TABLE_MODES`), i po jego wejściu robiło szkodę: kolumny znikały NIEZALEŻNIE
od wybranego widoku. Zmierzone przed usunięciem — telefon 390 px, user ręcznie
wybiera widok „Pro" (26 kolumn): widocznych 6, ukrytych przez ten blok 20.
Janek: „rozdzielczość telefonu nie ma zabierać kolumn, jedynie ustawiać
przełącznik widoku domyślnie w położenie phone".
Kto teraz zawęża tabelę na telefonie: serwer renderuje tylko 4 kolumny widoku
Phone (`mode_columns('phone')` = coin · price · 24h · chart), a wybiera go
`resolve_my_table_mode` z `?mode=` / ciasteczka `hodl_mt_mode` / User-Agenta.
Kolumn nie ma wtedy w DOM — CSS nie ma czego chować. User, który świadomie
wybierze na telefonie inny widok, dostaje swoje kolumny z przewijaniem w bok.
Razem z blokiem odpadła reguła `[data-has-rank="1"] .coin-column { left: 0 }`:
miała sens tylko dlatego, że rank był tu chowany. Poniżej 575,98 px rank chowa
`styles_my_new.css` i tam offset zeruje sekcja 2.6 — to zostaje bez zmian.
============================================================================ */
@media (max-width: 767.98px) {
/* --- 34.2 pigułki jako przewijane chipy + chip Filters ----------------- */
body .my-table-page .my-table-filter-pills {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
width: 100%;
padding: 2px 0 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
align-items: center;
}
body .my-table-page .my-table-filter-pills::-webkit-scrollbar {
display: none;
}
body .my-table-page .my-table-filter-pill {
flex: 0 0 auto;
min-height: 36px;
border-radius: 999px;
white-space: nowrap;
}
body .my-table-page .my-table-filter-pills > .hodl-m-collapse {
position: sticky;
right: 0;
flex: 0 0 auto;
width: auto;
min-height: 36px;
margin: 0 0 0 auto;
padding: 0 10px 0 12px;
border-radius: 999px;
background: var(--ct-secondary-bg, #131b28);
box-shadow: -14px 0 12px -6px var(--ct-secondary-bg, #131b28);
gap: 6px;
font-size: .8rem;
}
body .my-table-page .my-table-filter-pills > .hodl-m-collapse .hodl-m-collapse__summary {
display: none;
}
body .my-table-page .my-table-filter-pills > .hodl-m-collapse .hodl-m-collapse__chev {
margin-left: 0;
}
/* zwinięte: pasek pigułek zostaje, reszta znika (nadpisuje 2b) */
body .my-table-card.is-hodl-m-collapsed > .mt-toolbar {
display: block;
}
body .my-table-card.is-hodl-m-collapsed > .mt-toolbar .mt-screener,
body .my-table-card.is-hodl-m-collapsed > .mt-toolbar .mt-toolbar__tools,
body .my-table-card.is-hodl-m-collapsed > .mt-toolbar .mt-screener__toggle {
display: none;
}
body .my-table-page .mt-toolbar {
padding-bottom: 0;
}
/* Rows / Search / licznik: lżej */
body .my-table-page .my-table-meta {
padding-left: 4px;
padding-right: 4px;
}
}
/* ============================================================================
35. PREDYKCJE 2.0 — `/predictions/` (runda 5)
----------------------------------------------------------------------------
Decyzja Janka: „duże zmiany"; widoczne: mapa, Filters & view (zwijane —
sekcja 2b), Table / Library / New setup, legenda (zwijana). Mapa: „kreski
+ jedna etykieta R/R, szczegóły po dotknięciu wiersza" → w wierszu zostaje
`.pred-rrlive` przycięta do samego stosunku (np. „1:1.9"), znikają „now
1.1R" (`.pred-rrline__v`); tap w wiersz (hodl-mobile.js, klasa
`is-hodl-m-open`) pokazuje wszystko dla tego wiersza.
============================================================================ */
@media (max-width: 767.98px) {
body .predictions-workspace .pred-row:not(.is-hodl-m-open) .pred-rrline__v {
display: none;
}
body .predictions-workspace .pred-row:not(.is-hodl-m-open) .pred-rrlive {
max-width: 3.4em;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
body .predictions-workspace .pred-row {
cursor: pointer;
}
body .predictions-workspace .pred-row.is-hodl-m-open {
background: var(--ct-tertiary-bg, #1a2433);
border-radius: 10px;
}
/* legenda: zwijana przyciskiem (klucz pred-legend) */
body .pred-card.is-hodl-m-collapsed--pred-legend > .pred-legend {
display: none;
}
body .pred-card > .hodl-m-collapse[data-hodl-m-collapse="pred-legend"] {
border-radius: 0;
border-left: 0;
border-right: 0;
margin: 0;
}
/* nagłówek karty: tytuł + akcje kompaktowo */
body .predictions-workspace .pred-card__head {
gap: 8px;
}
body .predictions-workspace .pred-card__actions .pred-ghost {
min-height: 40px;
}
}
/* 35b. Predykcje: nagłówek karty zwarty (zmierzone 176 px przy 390 px) —
tytuł + „How to read" w jednej linii, licznik obok, Table / Library
w jednym rzędzie z szukajką pod spodem. */
@media (max-width: 575.98px) {
body .predictions-workspace .pred-card__head {
padding: 10px 12px 8px;
gap: 6px;
}
body .predictions-workspace .pred-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
}
body .predictions-workspace .pred-title-row h2 {
font-size: 1.15rem;
margin: 0;
}
body .predictions-workspace .pred-count-note {
margin: 0;
font-size: .78rem;
color: var(--ct-secondary-color, #8593a8);
}
body .predictions-workspace .pred-card__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 100%;
margin-top: 2px;
}
body .predictions-workspace .pred-card__actions .pred-ghost {
flex: 1 1 auto;
min-height: 40px;
justify-content: center;
}
body .predictions-workspace .pred-search--head {
flex: 1 1 100%;
max-width: none;
margin: 0;
}
body .predictions-workspace .pred-search--head input {
min-height: 42px;
}
}
/* ============================================================================
36. DROBNE (runda 5): /tasks/, okno zadania, /lab/, strony pomocnicze
----------------------------------------------------------------------------
Decyzja Janka: formularz dodawania taska „drobne", /lab/ „drobne",
pomocnicze (notyfikacje, kosz, wallets_view, ustawienia, modale) „drobne:
odstępy, cele dotykowe, modale na pełny ekran".
============================================================================ */
@media (max-width: 575.98px) {
/* /tasks/: przełącznik List / Board / Calendar jako segment, liczniki w rzędzie */
body .hodl-tasks-page__views {
display: flex;
gap: 6px;
}
body .hodl-tasks-page__views .side-panel__filter-chip {
flex: 1 1 0;
justify-content: center;
min-height: 40px;
border-radius: 10px;
}
body .hodl-tasks-page__counts .note-card__chip {
min-height: 28px;
}
/* formularz nowego taska: pole na całą szerokość, pod nim data + priorytet + przyciski */
body .hodl-tasks-page__quick .side-panel__quick-add-input {
min-height: 44px;
font-size: 16px;
}
body .hodl-tasks-page__quick .side-panel__quick-add-btn {
min-width: 44px;
min-height: 44px;
border-radius: 10px;
}
body .hodl-tasks-page__toolbar .side-panel__filter-chip {
min-height: 36px;
}
/* okno zadania (własny modal modułu) — pełny ekran */
body .hodl-task-view:not([hidden]) {
position: fixed;
inset: 0;
z-index: 1060;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0;
}
body .hodl-task-view .hodl-task-modal {
min-height: 100%;
max-height: none;
width: 100%;
max-width: none;
margin: 0;
border-radius: 0;
}
/* modale Bootstrapa: małe (potwierdzenia) jako arkusz od dołu, duże na cały ekran */
body .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen-sm-down):not(.pf-position-form-modal) {
margin: auto 8px 8px;
max-width: none;
}
body .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen-sm-down):not(.pf-position-form-modal) .modal-content {
border-radius: 16px;
}
body .modal-dialog.modal-lg,
body .modal-dialog.modal-xl {
margin: 0;
max-width: none;
min-height: 100%;
}
body .modal-dialog.modal-lg .modal-content,
body .modal-dialog.modal-xl .modal-content {
min-height: 100vh;
border-radius: 0;
}
/* /lab/: odstępy między krokami, przyciski pełnej szerokości w pasku */
body .lab2 .lab-toolbar .lab-btn {
flex: 1 1 auto;
justify-content: center;
}
body .lab2 .lab-step {
margin-bottom: 12px;
}
/* /notifications/, /trash/, /wallets_view/: nagłówki i przyciski w jednej linii */
body .content-page-inner > .d-flex.justify-content-between {
flex-wrap: wrap;
gap: 8px;
}
}
/* 31b. Zakładki feedu: styles_my_new.css ma reguły `[data-bs-theme=dark]
.feed-header__tab.is-active` (0,3,0), które biły moje (0,2,1) — zmierzone
who-wins: pigułka rgb(114,124,245) mimo `transparent` w sekcji 31.
Selektory niżej mają (0,4,2) i wygrywają w obu motywach. */
@media (max-width: 767.98px) {
html[data-bs-theme] body .feed-header__inner .feed-header__tabs,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ct-border-color, #26303f);
border-radius: 0;
padding: 0;
box-shadow: none;
}
html[data-bs-theme] body .feed-header__inner .feed-header__leading .feed-header__tabs,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__leading .feed-header__tabs {
border-bottom: 0;
}
html[data-bs-theme] body .feed-header__inner .feed-header__tabs .feed-header__tab,
html[data-bs-theme] body .feed-header__inner .feed-header__tabs .feed-header__tab:hover,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs .feed-header__tab,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs .feed-header__tab:hover {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
box-shadow: none;
color: var(--ct-secondary-color, #8593a8);
}
html[data-bs-theme] body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active,
html[data-bs-theme] body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active:hover,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active:hover {
background: transparent;
color: var(--ct-emphasis-color, #e7edf6);
border-bottom-color: var(--ct-primary, #3aa0f7);
box-shadow: none;
}
html[data-bs-theme] body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active i,
html:not([data-bs-theme]) body .feed-header__inner .feed-header__tabs .feed-header__tab.is-active i {
color: var(--ct-primary, #3aa0f7);
}
}