fixed table width completed games

hexlet-codebattle · Apr 29, 2021 · 15d3d31 · 15d3d31
1 parent c4d6365
commit 15d3d31
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/services/app/assets/css/style.scss b/services/app/assets/css/style.scss
@@ -380,6 +380,16 @@ a {
   transition: opacity 200ms, transform 200ms;
 }
 
+.table-layout {
+  table-layout: fixed;
+}
+
+.tr-display-flex {
+  display: flex;
+  justify-content: space-between;
+  width: 790px;
+}
+
 @keyframes scale {
   0% {
     transform: scale(0.5);

diff --git a/services/app/assets/js/widgets/components/Game/CompletedGames.jsx b/services/app/assets/js/widgets/components/Game/CompletedGames.jsx
@@ -6,7 +6,7 @@ import GameLevelBadge from '../GameLevelBadge';
 
 const CompletedGames = ({ games }) => (
   <div className="table-responsive">
-    <table className="table table-sm table-striped border-gray border-top-0 mb-0">
+    <table className="table table-layout table-sm table-striped border-gray border-top-0 mb-0">
       <thead>
         <tr>
           <th className="p-3 border-0">Level</th>
@@ -19,7 +19,7 @@ const CompletedGames = ({ games }) => (
       </thead>
       <tbody>
         {games.map(game => (
-          <tr key={game.id}>
+          <tr className="tr-display-flex" key={game.id}>
             <td className="p-3 align-middle text-nowrap">
               <GameLevelBadge level={game.level} />
             </td>