Improved handling for long words (#155)

[vanwykjd]

Associated Issue: #155

Summary of Changes

• Width of character input-columns responds to varying word lengths

[ollelauribostrom]

@vanwykjd Nice, I'll have a look at this when i get some free time this week 🙂

[coveralls]

Pull Request Test Coverage Report for Build 409

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 86.617%

---

Totals
Change from base Build 407:	0.0%
Covered Lines:	154
Relevant Lines:	175

---

💛 - Coveralls

[ollelauribostrom]

I've looked at your changes and they are working pretty nicely. However, I think that we can achieve the same effect just by doing some simple css changes 🙂

Have a look at the following css changes/additions:

.word {
  /* Use flex instead of grid */
  display: flex;
}

.word__char {
  /* Add the width property */
  width: 50px;
}

[vanwykjd]

@ollelauribostrom Thanks for looking into my changes and I appreciate your feedback! This isn't the first time I've been guilty of over-analyzing a situation...

As you mentioned, I agree that some simple CSS changes should do the trick, and will look into making those changes tomorrow.

[ollelauribostrom]

For now I think we don't want to introduce to much change to the mobile appearance. It would be sufficient to just add the following css to the existing mobile/tablet media queries:

  .word {
    display: grid;
    grid-template-columns: repeat(auto-fit, 50px);
  }
  .word__char {
    width: auto;
  }

[vanwykjd]

@ollelauribostrom I had a feeling the added breakpoints may have been a little much... I tend to get caught up it in the details once I've envisioned something.

I changed back to original the media queries and made the adjustments as suggested, but the appearance of the long words revert back to the original issue: (for the mobile devices)

My question is whether or not the improvements requested for this issue (#155) regards all devices or just the large, and have the improvements be addressed for the mobile devices in issue #152?

[ollelauribostrom]

I think for #155 we can just focus on making this look nice on desktops and keep the original style for mobile devices. Not sure on how the best way would be to solve this on mobile devices but we can look at that in #152 🙂

[ollelauribostrom]

Nice, I commented on some minor stuff that needs to be fixed before merging this 🙂

[ollelauribostrom]

You can just use width: 50px (no need for the max-width property as far as I understand 🙂 )

[ollelauribostrom]

No need for this margin property

[ollelauribostrom]

This should not be removed since it fixes the progress-bar appearance in FF

[ollelauribostrom]

Nice, thanks a lot 👍