Button text cut off in Edit Modal/crowding of sidebar

[marcellamaki]

Observed behavior

Reported by @thanksameeelian in the 2023-21-06 bug hunt

“add new folder” button cut off in smaller screen view (but horizontally scrollable) though there is padding that could be eliminated to render it fully visible

and @tomiwaoLE

“import more button/sidebar is bunched up and cut off on the left side of the screen

Expected behavior

The layout of this page should ensure that all button text is visible. Probably some of the updates to the bulk editing designs would be relevant here, but maybe could be introduced gradually?

User-facing consequences

Some text not visible

Usage Details

hotfixes 2023-21-06 bug hunt

[CHIRANTH-24]

Hello @marcellamaki , I would like to work on this issue. I wanted to know the procedure to reproduce this issue.

[akolson]

Hi @CHIRANTH-24, Yes, you can. Thanks!

To replicate the issue, you will need to;

• Set up Kolibri Studio. There is a Read Me on how to set up the project. However, incase you encounter any challenges, please let us know so we can support you.
• Using the NEW CHANNEL button, create a new channel(https://localhost:8080/en/channels/#/my-channels)
• Proceed to create a new folder inside the newly created channel. The button in question is on the top-left of the page. You may need to resize your browser window/apply zooming to replicate the issue.

Thanks again for offering to contribute in making Kolibri Studio better.

[CHIRANTH-24]

Thank you @akolson
I came across the documentation and Readme.md files. I have started to work

[CHIRANTH-24]

Hi @CHIRANTH-24, Yes, you can. Thanks!

To replicate the issue, you will need to;

• Set up Kolibri Studio. There is a Read Me on how to set up the project. However, incase you encounter any challenges, please let us know so we can support you.
• Using the NEW CHANNEL button, create a new channel(https://localhost:8080/en/channels/#/my-channels)
• Proceed to create a new folder inside the newly created channel. The button in question is on the top-left of the page. You may need to resize your browser window/apply zooming to replicate the issue.

Thanks again for offering to contribute in making Kolibri Studio better.

Im really sorry to say this:
Im still not able to get to know the procedure to reproduce this issue (the link was not responsive) .
But I was able to set the project locally and install all the required dependencies.

[akolson]

Hi @CHIRANTH-24. I am very sorry to hear this. I will follow this up by posting a video on how to replicate the issue.

[akolson]

Screen.Recording.2023-10-30.at.14.44.43.mov

Hopefully this video clarifies how to replicate it.

[CHIRANTH-24]

Thank you
I got it

[akolson]

Hi @CHIRANTH-24! Any updates on this issue? In case you have any questions or comments, please be sure to let us know so we can support you. Thanks

[CHIRANTH-24]

Hi @akolson !
I'm really sorry to say this,
I'm currently learning Vue.js, and it would be great if you could unassign me for the moment. I'll definitely let you know when I'm ready to continue.

[akolson]

@CHIRANTH-24 No worries, I will proceed to reassign it accordingly! Please feel free to choose from other issues that you are comfortable working on. Thanks again!

[nikkuAg]

Is this issue still open? I would like to work on this.

[thanksameeelian]

thank you, @nikkuAg! i've assigned you to this issue. there is some helpful setup info in @akolson's comment, if needed. please let us know if you have any follow up questions!

[nikkuAg]

@thanksameeelian,
I was able to setup studio using docker, but when running yarn run devserver, I am getting blank white screen

[MisRob]

I'm sorry to hear that @nikkuAg. Can you send us your terminal output including all setup commands? Can you see some errors in the browser console?

[nikkuAg]

[AlexVelezLl]

Hi! @nikkuAg. It seems to be a problem with the webpack dev server. Can you send us the entire output of the yarn run devserver command? Especially at the beginning where you should see something like:

...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.109:4000/
...

[nikkuAg]

Hi @AlexVelezLl

[vkWeb]

@nikkuAg Try doing the following --

1. Run yarn install --force .
2. Then, do yarn run devserver.
3. Open the localhost:8080 in chrome's incognito mode.

Let me know if the above fixes it.

[nikkuAg]

Still the same

[vkWeb]

@nikkuAg Then most probably its a network issue, I feel the backend server is not able to serve JS assets. Umm, try doing yarn run build and then after this command is completed, run yarn run runserver, let's see.

[nikkuAg]

@vkWeb, thank you for your help, after running the yarn run build, the issue has been resolved

[vkWeb]

@nikkuAg glad that it helped!

[nikkuAg]

Hey
Sorry, I was not able to work in the last month but was resuming my work and after running the studio I am getting the same error again.

[AlexVelezLl]

Hi @nikkuAg! Could you please open a new Discussion item related to the problem you are facing? With a detailed explanation of your environment, the commands you ran, and the outputs you see. This way, we can help you, and we don't continue filling this issue with comments not related to the issue.