i/5831: Special characters grid tile should render correctly when the scrollbar shows up in the panel

src/ui/charactergridview.js

@@ -37,7 +37,18 @@ export default class CharacterGridView extends View {
 
 		this.setTemplate( {
 			tag: 'div',
-			children: this.tiles,
+			children: [
+				{
+					tag: 'div',
+					attributes: {
+						class: [
+							'ck',
+							'ck-character-grid__tiles'
+						]
+					},
+					children: this.tiles
+				}
+			],
 			attributes: {
 				class: [
 					'ck',

tests/ui/charactergridview.js

@@ -28,8 +28,18 @@ describe( 'CharacterGridView', () => {
 		} );
 
 		it( 'creates #element from template', () => {
+			const tile = view.createTile( 'ε', 'foo bar baz' );
+			const tilesElement = view.element.firstChild;
+
+			view.tiles.add( tile );
+
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-character-grid' ) ).to.be.true;
+
+			expect( tilesElement.classList.contains( 'ck' ) ).to.be.true;
+			expect( tilesElement.classList.contains( 'ck-character-grid__tiles' ) ).to.be.true;
+
+			expect( tile.element.parentNode ).to.equal( tilesElement );
 		} );
 	} );
 

theme/charactergrid.css

@@ -4,6 +4,8 @@
  */
 
 .ck.ck-character-grid {
-	display: grid;
-	grid-template-columns: repeat(10, 1fr);
+	& .ck-character-grid__tiles {
+		display: grid;
+		grid-template-columns: repeat( 10, 1fr );
+	}
 }