uclaacm/recursion-lab

🐾 Minor Update: Fix Code + Output 60% 40% Width

Closed this issue · 0 comments

Context

There is a component FinishCode found at src/components/shared/FinishCode.tsx. An example of its usage is in Excursion 2 in the Code the Components Together box:

Screenshot 2023-10-08 at 9 40 18 AM

Problem

We want to avoid having the Output box shrink tremendously when the code is long. As you can see, the dark grey output box is practically non-existent. An example of what it should look like is Excursion 1 in the Code the Components Together box:

Screenshot 2023-10-02 at 11 20 45 PM

Proposed Solution

  • There is margin: 5em on the finish-card-container class. This is way too much. Use margin: 20px.
  • If we fix the box sizes of each (e.g. 60% code + 40% Output box) that should allow the Output box to not get distorted.
  • Add any other fixes that you see fit.