From 600691fe183052a4dec879e53b02d50e6249a1dd Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 29 Nov 2019 09:52:33 +0100
Subject: [PATCH] Fix: Special characters grid tile should render correctly
 when the scrollbar shows up in the panel.

---
 src/ui/charactergridview.js   | 13 ++++++++++++-
 tests/ui/charactergridview.js | 10 ++++++++++
 theme/charactergrid.css       |  6 ++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/ui/charactergridview.js b/src/ui/charactergridview.js
index 2988eee..f104f69 100644
--- a/src/ui/charactergridview.js
+++ b/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',
diff --git a/tests/ui/charactergridview.js b/tests/ui/charactergridview.js
index 768fa4d..ffe69c5 100644
--- a/tests/ui/charactergridview.js
+++ b/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 );
 		} );
 	} );
 
diff --git a/theme/charactergrid.css b/theme/charactergrid.css
index 000ade0..283e00f 100644
--- a/theme/charactergrid.css
+++ b/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 );
+	}
 }