mobile responsive

[ihatenumbers]

Resolves #42

Just makes it more readable in mobile view and added a settings button for the menu to appear. The button settings placement could probably placed in a better position and be somewhat bigger.

Error: HTTP 400 happens when #50 isn't merged (using togetherai backend)

[lmg-anon]

Nice idea, this looks very promising! However, I think these problems need to be solved before it can be merged:

1. Currently, it only works with the "Monospace Dark" theme.
2. The right margins are broken.
3. The bottom bar covers the text.
4. The text looks way too big.

[ihatenumbers]

didn't look so weird since i was using dev tools. I'll get to fixing this and use my phone screen

[KaraKaraWitch]

I had an alterative implementation for the mobile responsive layout. Didn't push to any git repo but it should be simpler to implement.

@media (max-width: 767.98px) {
    body {
        flex-direction: column;
    }
    #prompt-container {
        width:100%;
        max-width: 100%;
    }

    #sidebar {
        width:auto;
        max-height: calc(30vh - 8px);
    }
}

[lmg-anon]

@ihatenumbers Are you still planning to work on this PR?

[ihatenumbers]

@lmg-anon I apologize for the inconvenience. Initially, I did plan to work on this PR, but I made an incorrect assumption - mistakenly thinking you were the same as @KaraKaraWitch. As a result, I thought this PR was no longer relevant. I should have checked again, my bad.

[ihatenumbers]

Nice idea, this looks very promising! However, I think these problems need to be solved before it can be merged:

1. Currently, it only works with the "Monospace Dark" theme.
2. The right margins are broken.
3. The bottom bar covers the text.
4. The text looks way too big.

I think I ironed out most of those problems (except for 4). Since when I tried to edit padding in #prompt-overlay, it's not being applied ~and overridden by earlier padding: 2em 3em~

[lmg-anon]

1, 2, and 4 seem fine now. I assume you were referring to issue 3, right? One alternative I can think of is dynamically setting a margin-bottom to prompt-container according to the height of the sidebar.

Also, it might be better for the sidebar to start hidden on mobile devices because it might not be intuitive to leave the sidebar. And it looks like if you're on the desktop and hide the sidebar and expand the window, the sidebar remains hidden:

[ihatenumbers]

1, 2, and 4 seem fine now. I assume you were referring to issue 3, right? One alternative I can think of is dynamically setting a margin-bottom to prompt-container according to the height of the sidebar.

Also, it might be better for the sidebar to start hidden on mobile devices because it might not be intuitive to leave the sidebar. And it looks like if you're on the desktop and hide the sidebar and expand the window, the sidebar remains hidden

Only added some margin bottom to prompt-container and other things, is this fine now? Also, I tried pulling from head without edits and it broke

[neCo2]

Also, I tried pulling from head without edits and it broke

What's the error?

[ihatenumbers]

28px seems to be barely anything here, that's why I suggested dynamically changing the margin-bottom to the height of the sidebar so it would be enough for all fonts/sidebar sizes:

Maybe you could use ResizeObserver for this (example), unless you have a better idea.

took me longer than I'd admit, it's first time interacting with react.

[ihatenumbers]

Also, I tried pulling from head without edits and it broke

What's the error?

unhelpful errors.

1. POST http://127.0.0.1:3000/all 404 (Not Found)
2. Uncaught (in promise) 404

[neCo2]

Sounds like there's an issue with the loadAllFromDatabase method of ServerDBAdapter, or with the /all endpoint of server.js, but that's unfortunately all I can say. The maintainer's gonna have to figure that one out.

[lmg-anon]

Looks like the API SelectBox disappeared:

took me longer than I'd admit, it's first time interacting with react.

I hope the examples made it a bit easier to figure out :)

unhelpful errors. POST http://127.0.0.1:3000/all 404 (Not Found) Uncaught (in promise) 404

Sounds like you're using a web server but it isn't the mikupad server, or you're using an old version of the mikupad server. I guess I will add a version check and that would fix both cases.

[lmg-anon]

This looks fine to merge now, thank you for your contribution!