fira | eCommerce App React Native Codekit | Frontend Framework library

I use lots of boxes to display information, and their current style is this:

Recently updated the macOS to Bigsur and as part of the update, I also updated the packages through homebrew. My coc.nvim plugin was not working so, I reinstalled the package. And after that, I am unable to see the color of my scheme (gruvbox) which is also installed as a plugin. Now the screen is all grey with the dark background (the background was dark even previously). I am attaching the vim settings for clarification. The syntax setting is enabled and it is rightly picking erlang, the termguicolors is set as well. I am using mac terminal to invoke vim.

I am making a sort of chatbot in HTML, CSS, and javascript with the website here > https://chatroombot.n8thedev.repl.co/

If you click the menu button you will find a page to change the background, so far hovering over the 27 different buttons creates a border inside the button that is somewhat transparent. I attempted to make a click effect where it makes the clicked button border darker (higher alpha value). The issue I ran into was when I cleared the other borders when you click on the button. EX: if (Click button 1) { border: none for button 1,2,3... }

But when I tried to do that the hover effect didn't work anymore because it cleared the button's border permanently.

I am here for suggestions on a solution.

Also here is the existing code:

index.html:

I want to use a table to display words and sentences, and I currently have:

One of the pages on this site has problems with the width on mobile, and I can't find the cause. I tested not displaying the table with 4 columns, which is the only unique element to this page (the other pages work fine). I checked the width properties on the html body, and there doesn't seem to be anything wrong. Any other ideas as to what might be causing this?

I use tables like this one:

I am trying to use PostCSS nesting with CSS variables but it doesn't convert CSS variables at all.

Instead it shows Invalid property value in the DOM for CSS Variables.

My tailwind.css file contains a bunch of CSS variables:

I have this box: With this HTML:

I'm building a sidebar in React and I'm trying to set the height to fill the entire page even if other content on the page goes beyond the initial window size.

Right now it only goes to the bottom of the initial page height, and if content on the page-- next to the sidebar, not inside of it --overflows, the user can scroll and the content is visible, but the sidebar stops at the end of the initial page height.

Here is a screenshot of what I'm describing

I've tried the following:

I have a single HTML page with several sections to which the user can navigate by clicking the corresponding link at the top. That link will get highlighted when the user navigates via that link.

Now I would like that when the user scrolls up or down manually, and a different section comes into view, that the corresponding link in the top menu will get the highlight.

My attempt is in the scroll event handler, but I am facing an issue with finding the HTML section anchor id that corresponds to the current scroll position.

Note that I am required to produce the li dynamically -- so that cannot change: the ul must be empty as per requirements of my project so all list items and hyperlinks must be generated in JavaScript (as it is currently done).

Here is my page. My problem is in the scroll event handler: