non selectable text

tags side by side
load 16 videopreviews instead of 12 for huge monitor sizes

src/elements/Preview/Preview.module.css

@@ -2,10 +2,8 @@
     font-size: smaller;
     font-weight: bold;
     height: 20px;
-    height: 20px;
     max-width: 266px;
     text-align: center;
-    text-align: center;
 }
 
 .previewpic {

src/elements/Tag/Tag.module.css

@@ -3,8 +3,8 @@
     border: none;
     border-radius: 10px;
     color: white;
-    display: block;
-    margin: 10px;
+    margin-left: 10px;
+    margin-top: 15px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }

src/elements/VideoContainer/VideoContainer.js

@@ -24,7 +24,7 @@ class VideoContainer extends React.Component {
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);
 
-        this.loadPreviewBlock(12);
+        this.loadPreviewBlock(16);
     }
 
     render() {

src/elements/VideoContainer/VideoContainer.test.js

@@ -8,11 +8,11 @@ describe('<VideoContainer/>', function () {
         wrapper.unmount();
     });
 
-    it('inserts tiles correctly', () => {
+    it('inserts tiles correctly if enough available', () => {
         const wrapper = shallow(<VideoContainer data={[
-            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
+            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
         ]}/>);
-        expect(wrapper.find('Preview')).toHaveLength(12);
+        expect(wrapper.find('Preview')).toHaveLength(16);
     });
 
     it('inserts tiles correctly if not enough available', () => {