strelok011

Если у Вас не флекс-верстка, то:
1. С увеличением padding абсолютная длина будет что??
2. Тот же эффект - это какой?

Если у Вас есть блочный контейнер (div, p, h, которые по умолчанию имеют состояние display: block), то они занимают всю доступную ширину, им указывать 100% не обязательно.
Если Вы хотите зафиксировать ширину блока и добавить ему паддинг, то для сохранения значения ширины добавляют атрибут box-sizing: border-box, т.к. значение по умолчанию content-box
Если вы хотите задействовать margin - можно использовать вычисляемую ширину
width: calc(100% - 20px)
где margin в сумме должен быть равен 20px. При этом обязательна именно такая расстановка пробелов. Внутри скобок между значениями и арифметическим знаком.

Чтобы меньше путаться - гуглите информацию про блочные и строчные элементы.

этот вопрос уже задавался. поиск выдал ответ
Как запретить скролл сайта, если поверх него есть фиксированный блок с прокруткой вниз?
другими словами -
body {overflow: hidden;}
Открыл модалку - боди заморозил. плюс еще можно проверять на сколько ты проскроллил и при добавлении стиля с оверфлоу дополнительно в js скроллтоп выполнять. В некоторых браузерах оверфлоу хидден вызывало подскок в начало страницы, если память не изменяет.

Это обычная проблема для мобильных браузеров, связанная с динамическим изменением высоты вьюпорта браузера при скролле, когда на экране появляются дополнительные панели управления с кнопками.
Есть лайфхак с использованием вместо процентов vh, добавлением js на ресайз окна и переопределением стандартного значения в vh в css-переменную, ссылко
Тут больше вопрос к дизайну мобильного вида страницы, и как она должна выглядеть в зоопарке мобильных устройств (новомодные узкие мобилы, старые ведроиды, планшеты)
Если дизайнер слабо разбирается в этом - будет ад для верстальщика с поддержкой кучи промежуточных разрешений в css со сменой размеров шрифтов, отступов и т.п.

больше похоже на то что путь из html к css неверный.

попробуйте
<meta name="viewport" content="minimum-scale=1">

Дам немного развернутый ответ, почему это не возможно.
Прежде всего - почему стили именно каскадные? Каскад - это цепочка зависимостей, определяющих, на что данный стиль повлияет.
Пример:

a {color: "red"}
h1 a {color: "green"}
h1+a {color: "yellow"}

первый стиль говорит - "все теги А будут красного цвета"
второй стиль уточняет - "а теги А, лежащие в теге H1 будет зелеными"
третий стиль добавляет еще правило "теги А, находящиеся СРАЗУ ПОСЛЕ тега H1 будут желтыми"
При этом чем больше уточняющих узлов (на самом деле есть еще нюансы, но это отдельный разговор) в каскаде стиля, тем он будет более весомый.
Уточняющие стили будут перекрывать значение первого общего стиля.
Как же работает браузер?
К примеру есть такой стиль
div h1 span a {color: "blue"}
Это каскад, говорящий что тэг А, находящийся во вложенной структуре вида div>h1>span>a и только такой будет синего цвета.
Так вот браузер начинает разбирать такой стиль начиная с правого! края. Соответственно он в начале собирает коллекцию всех тегов А и потом начинает отсеивать не подпадающие под описание в стиле варианты. Сначала оставит только те тэги, которые вложены в тег SPAN, затем по цепочке пройдет до самого начал.
Этот алгоритм парсинга и сообщает, что нельзя прописывать условие для элемента опираясь на его вложение.
Можно написать стиль для элементов, которые идут следом за каким-либо определенным.
h1~p {color: "orange"}
раскрасит текст во всех тегах p, идущих следом после h1 (причем могут идти не подряд) но только в рамках общего родительского контейнера.

Системный скроллбар изменить не получится, это за пределами области документа.
Разные браузеры могут предоставлять урезанные и не совпадающие по изменяемым свойствам вендорные хаки.
Для полного управления внешним видом скроллба можно использовать решения, опирающиеся на атрибуты overflow для body и контейнеров в html + js для позиционирования своего сверстанного бегунка с произвольными параметрами.
Если есть желание всё это использовать - есть готовые решения типа https://grsmto.github.io/simplebar/
Но нужно иметь в виду, что такое решение может сломаться в каких-либо непредвиденных разработчиками условиях, в отличие от системного скролла.
Вердикт - полное извращение )

import {currentDate} from '/modules/func.js';
Вы уверены, что путь правильно прописан?

Лучший вариант был бы не канвас а svg

есть как минимум три предположения:
1. на странице отсутствует <DOCTYPE html>
2. на странице подключается дополнительно стилевой файл или в хидер монтируется пачка стилей, в которых у инпута есть отступы
3. возможно в фиддле влияет внешний файл со сбросом стилей.
Возможно поможет инструкция box-sizing: border-box;

добавьте еще переменную-флаг. Если она активна, наезд на пункт меню игнорируется.
Взводите ее на первом открывающемся пункте, отключаете по таймауту на выходе.

Немного дополню предыдущего комментатора:
1. если ссылка начинается с "/" - это значит "начать с корня сайта (или диска). например ссылка вида /images/image.png будет искаться либо по адресу site.ru/images/image.png, а локально - относительно того раздела на винте (c:/images/image.png), где находится файл html. При этом не будет браться в расчет путь к каталогу, где находится html. Ссылка получится "абсолютной".
2. если ссылка будет без дроби вначале вида "images/image.png" - путь к изображению будет строиться от места нахождения файла html. Например: файл лежит в каталоге "c:/work/site/index.html", тогда рядом с ним должен находиться каталог images с картинкой, и браузер будет открывать картинку по следующему пути: "c:/work/site/images/image.png".
Ссылка без дроби вначале сработает аналогично "./images..."
точка с дробью принудительно указывает на текущий каталог, в котором лежит файл html. Ссылка получится "относительной" (т.е. будет строиться относительно местонахождения html файла)

live в редакторе позволяет имитировать работу на сайте и подставляет корневой каталог от местонахождения файла html. Если будет более сложная структура - и live может не помочь, если будете так ссылки выстраивать. Для локальной верстки используйте только относительные ссылки. При необходимости обратиться в соседний по уровню вложенности каталог ссылка может начинаться с "../", что укажет браузеру необходимость подняться на один уровень вложенности выше.

Если вы хотите сверстать макет на рисунке именно на флексах - изолируйте каждую смену направления в отдельный контейнер (пусть будет div).

На флексах можно это представить в виде 4 последовательных div, в последнем еще два div для вертикальной ориентации.

вот пример

Я бы посоветовал отталкиваться от следующей концепции:

1. фронт у вас должен отвечать только за визуализацию - все чувствительные данные отдаются бэком и туда же возвращаются. Вам должно быть реально всё равно, что ваш js смогут распарсить, без авторизации нет смысла. Так же если вы желаете прикрыть какой-то суперуникальный код на фронте - сборщики с обфускацией, прочая фигня ))

2. Авторизацию можно делать по схеме jwt-токена с выпуском короткоживущего токена, которым подписываются запросы в бэк, к нему рефреш токен для обновления. Токены можно хранить в локалсторе, чтобы выгрузка браузера не потерла состояние авторизованности. Примеров в интернете должно быть полно. Время жизни токенов выбираете на свой вкус.

а на самом деле - префиксы служат для использования экспериментальных опций css которые еще не прошли релизную стадию либо в стандарте w3c либо в движке браузера. Их можно использовать, особого вреда не будет. Пишут сначала с префиксом, потом без, чтобы релизная инструкция могла примениться ПОСЛЕ объявления с префиксом.
Можно почитать тут.
В на счет применения всяких хаков для компенсации ущербности браузеров - такие префиксы не помогут.

Предполагаю что пригодится это и это

Как вариант - плагин https://select2.org/