Not able to change programming language once extension is loaded

[vineethreddy899]

Not able to change programming language once extension is loaded. The dropdown to select programming language is not working.

[sanvi1803]

Not able to change programming language once extension is loaded. The dropdown to select programming language is not working.

Hey any idea how to get API Key since for me it says The model gpt-4o does not exist or you do not have access to it.

[Owaiseimdad]

Not able to change programming language once extension is loaded. The dropdown to select programming language is not working.

@vineethreddy899 can add a video if possible. This should not be the case as I have seen the code of the content.tsx and there is nothing we are doing to language button.

[piyushgarg-dev]

Yes, This issue is coming that language dropdown is not working.

[Owaiseimdad]

/assign to me @piyushgarg-dev

[piyushgarg-dev]

@Owaiseimdad Done

[Owaiseimdad]

@vineethreddy899 and @piyushgarg-dev let me know what am I doing wrong. Because I cannot reproduce the issue.

https://github.com/user-attachments/assets/e77f6fd5-04c2-4483-ac68-2390820fc88b

[ruru-m07]

@Owaiseimdad are u running build output or are you in dev mode?

also resolve the configuration issue that occurs after the CSS for the next pages loads.

and this issue only happens in the dev environment, not in the prod build.

[Owaiseimdad]

got it @ruru-m07 will do that. It was actually prod mode.

[Owaiseimdad]

okay got the issue, due to tailwind css loaded in index.css. specific "@tailwind utilities;" is causing the problem. It is inferring with the application tailwind.

Working in the resolution.

cc: @piyushgarg-dev @ruru-m07

[Owaiseimdad]

@ruru-m07 need your help here, stuck with problem for a while now.

the style injected into the head is causing the problem. not just the drop but so many selector.

@piyushgarg-dev the problem is not just with one drop down but the entire applications css. you can refer to the video

[Owaiseimdad]

https://github.com/user-attachments/assets/1d1a2d08-b5d6-4af1-a9a9-fbddd8b0e7ef

[ruru-m07]

I did extensive debugging and found a single property causing this issue.

I spent a lot of time and effort debugging this issue; I hope this is helpful to all.

my report

if u r super lazy TL;DR

so what I do?

• I have faced this kind of issue before, so I know that this conflict arises because our site and the LeetCode site both use Tailwind CSS.
• Instead of using our CSS directly from /src/index.css, I manually build Tailwind CSS. For instance, I use npx tailwindcss -i ./src/index.css -o ./out.css, where -i specifies the input CSS file, and -o specifies the output location.
• than use that out.css file in project:-
• as u can see here

• this is how CSS build looks like. it was vary large file containing 1844 lines of CSS code.

• and then I comment each and every Selector and see if the output changes.

• and guess what? I want that single selector that created this issue, it's .hidden. If I comment on it then I see that issue resolved

• it means the selector .hidden makes this issue happen.

• but there is no why to tell tailwind that don't make .hidden class also we can't overwrite it.

• so that I write some scripts to handle this. this will run after npx tailwindcss -i ./src/index.css -o ./out.css --watch runs

• also here is run.js and package.json. this is the workflow for development.

• also we not gonna push that large file in prod or github

Here is a video proof. ( working selector )

https://github.com/user-attachments/assets/142840d4-9756-4c43-8218-9439740ade8b

here is some codebase walkthrough

https://github.com/user-attachments/assets/824bc92a-2d9f-4da6-b99b-9b135fc173ca

mentions: @Owaiseimdad @piyushgarg-dev @vineethreddy899