Change:
Not applicable The editor fills the screen instead of showing the instructions. You have to scroll up o see the instructions, and it’s not obvious if you should scroll up or down. ! Step 55: ! Device: [Laptop] OS: [Windows 10] Browser: [brave] Version: [Version 1.33.106 Chromium: 96.0.4664.110 (Official Build) (64-bit)] What the 3 steps have in common is that the editor has on the 1st line of the CSS file. All other lessons show the previous row number above the instructions (see screenshots). I may have seen this in previous sections but I can’t be sure. If someone can query all the lessons in all the sections to find where the focus is at line 1, then I could check them. Although, that will happen for all the early lessons. You would probably need to do a condition for 10 or more lines of code in the CSS file. That's assuming you need someone to check it rather than seeing the issue and fixing it in the other sections. Also, I need a list of lessons to check because I don't know how to easily scroll through all the steps. I had to CTRL+click every step in the penguin section because I knew I missed one (Step 55).
Hello there, Thank you, for opening this. This bug is (documented here](), but I will leave this open as a specific issue to tackle. If I correctly recall, we did actually already fix this, but the bug appears to have made its way back
I searched to see if it was already reported but I guess I didn't search well enough. It looks like the example shows Step 55 in the Penguin section. BTW, I found 1 Step in the Ferris Wheel section that does the same thing.
Yes - as pointed out, this looks to be an issue with the editor and should probably fix there. If we want a quick or temporary fix, I found that adding an empty line in the seed code will make it so you don't have to scroll up. change css --fcc-editable-region--  A quick search shows that there's around 70 steps where this occurs: ! Not sure if we want to use this as a temporary fix or not. Any thoughts
70 steps for just the English version or all languages? How did you perform the search? What makes the directions appear in the "correct" location for all the other lessons? Would you paste in links of all the steps where this happens? I had to search for Step 65 until I found it in the Quiz section. So far, it seems as if row 1 in the CSS file is the first row in the editor and that there is a full set of styles below it. That is what I noticed in the ones I mentioned above. I also looked at Step 20 Ferris Wheel and it also shows row 1. What is it about the top of that makes the directions move up?
That screen shot is VS Code. I have the repo opened in it. You can search for things. I searched for that pattern at the top (css|html) --fcc-editable-region-- ` Make sure the is checked at the top right there to enable regex searches.
I was not able to duplicate your search with the 2nd line having . I found the Toggle Search Details button and the Open New Search Editor button, but I could not find a way to ENTER onto a new line for the editable region line. Looks like there are 7 languages so that would be 10 Steps/Lessons where this happens. I found the 3 in my original message plus step 20 in Ferris Wheel. Your screenshot has 2 in the quiz section plus the last one in the screenshot step- (not sure of the section) - that's 7 - so there must be 3 more for 10 in each language.
We should definitely not use a temporary fix for this - resolve the issue at the editor
I did a search for and found some json and js files with that phrase in it. What are ? I have to leave but I wanted to look at ana . The first one sets as a , but I'm not sure exactly what these files do - just poking around. Where would you even begin to look for why these lessons are different?
For all the steps I looked at, they all have immediately following md I found 47 files (not 70) and they all have the same format with following the CSS codeblock: Accessibility Quiz: Steps 65, 66. Cafe Menu: Steps 15, 19, 20, 22, 58, 73 Colored Markers: Steps 8, 37, 40 Photo Gallery: Step 7 Grid Magazine: Step 26 Penguin : Steps 2, 3, 4, 5, 54, 55, 82, 88 City Skyline: Steps 5, 6, 25, 27, 39, 50, 59, 68, 95 Registration Form: Steps 7, 8, 9, 37, 49 Balance Sheet: Steps 26, 27 Piano: Steps 9, 10 Rothko: Step 8 Nutrition Label: Steps 6, 11 Ferris Wheel: Steps 3, 4, 5, 20, 21 Steps with an asterisk () appear to display correctly because there are not a lot of lines outputted to the page. The suggested fix seems good: adding a line between the two lines*. However, I would like to know what the root cause is for that behavior. And I didn't realize that RWD Beta is only in English.
We have had this bug before, and we should not do a temporary fix of adding spacing between the ERMs and code blocks. The most likely place this will need fixing is:
I'll take a look at that. What does the extension stand for?
is the TypeScript extension with JSX. That is, the file contains both TypeScript and JSX.
Sorry, I should have searched that myself. I've never worked with TypeScript and only worked with React a few times. There is a constant name for an object that is repeated: . First on line 485, then again on line 516, both with the same properties but the values are different. I thought you can not overwrite a variable that is declared with the keyword. And isn't TypeScript "strict"? on line 484: on line 516: In the first occurrence you have , and on line 784 there is a comment about the function : I found that because I was looking for which only occurs in that object. Any chance declaring the const twice is the problem? Does the 2nd one overwrite the first one?
Yes, but they are in different scopes: I cannot see it declared twice
I said it was declared twice, meaning in the global scope - or at least that is what I thought. I didn't notice that. My mistake, let me keep poking around...
I can't figure that file out. There are so many variables and functions that I don't know where to start looking, plus I do not understand a lot of the code.
No worries. It is one of the largest files in our codebase. So, it takes a lot of time to read / get used to. I will spend some more time looking into it.

Discussion:
// if ( //  isEqual({ ..._editor.getPosition() }, { lineNumber: 1, column: 1 }) // ) { <ins> const [top, bottom] = editableRegionBoundaries; </ins> editor.setPosition({ <del> lineNumber: editableRegionBoundaries[0] + 1, </del> <ins> lineNumber: top + 1, </ins> column: 1 }); <del> editor.revealLinesInCenter( editableRegionBoundaries[0], editableRegionBoundaries[1] ); </del> <ins> // To prevent descriptionWidget from being out of view editor.revealLinesInCenter(top, top === 0 ? 1 : bottom); </ins> // } }