wider and shorter political display

2 files changed, 34 insertions, 19 deletions

diff --git a/play.css b/play.css
index 06044a0..f26d24d 100644
--- a/play.css
+++ b/play.css
@@ -220,10 +220,6 @@ dialog button {
 	border: 1px solid #0008;
 }
 
-#political_body div.deal {
-	margin: 16px 8px 8px 8px;
-}
-
 #political_body td {
 	border: 1px solid #0004;
 	padding: 4px;
@@ -286,6 +282,34 @@ dialog button {
 #discard_pile_header { background-color: var(--color-light-discard); }
 #discard_pile_panel { background-color: var(--color-medium-discard); }
 
+.panel_body { padding-right: calc(18px + 167px); }
+.panel_body { gap: 18px 0; }
+
+#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
+#discard_pile_body { padding: 18px; gap: 18px; }
+
+#political_panel {
+	width: min-content;
+}
+#political_body {
+	padding: 4px;
+	display: grid;
+	grid-template-rows: min-content 1fr;
+	grid-template-columns: 179px 879px 169px;
+	gap: 12px;
+}
+#political_display { grid-row: 1; grid-column: 2; }
+#pc_deck { grid-row: 1; grid-column: 1; }
+#pc_show { grid-row: 1; grid-column: 3; }
+#pc_show .card + .card { margin-top: 12px ; }
+#pc_deck, #pc_show { margin-top: 4px; }
+
+#pd_deals { grid-row: 2; grid-column: 2; }
+
+div.deal + div.deal {
+	margin-top: 8px;
+}
+
 /* LOG */
 
 #log {
@@ -665,14 +689,6 @@ body.shift span.value.deck_4 { background-color: #f002 }
 .card.tc.hand { margin-right: calc(-167px + 10px); }
 .card.polcard.pile { margin-right: calc(-167px + 6px); }
 
-.panel_body { padding-right: calc(18px + 167px); }
-.panel_body { gap: 18px 0; }
-#discard_pile_body { padding: 18px; gap: 18px; }
-
-#political_body { padding: 4px 0; display: body; }
-#political_panel { width: 879px }
-#discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
-
 .card_pile {
 	display: flex;
 	flex-wrap: wrap;
diff --git a/play.html b/play.html
index a231426..3af7332 100644
--- a/play.html
+++ b/play.html
@@ -121,14 +121,13 @@
 			<div class="pc_pile card_pile" id="placed_pragmatic"></div>
 			<div class="pc_pile card_pile" id="placed_austria"></div>
 		</div>
-		<div style="display:flex;flex-wrap:wrap;gap:18px;margin:18px;">
-			<div id="pc_deck" class="card_pile"></div>
-			<div id="pc_show" style="display:flex;flex-wrap:wrap;gap:18px;">
-			</div>
+		<div id="pc_deck" class="card_pile"></div>
+		<div id="pc_show"></div>
+		<div id="pd_deals">
+			<div class="deal" id="subsidy_list"></div>
+			<div class="deal" id="active_deal_list"></div>
+			<div class="deal" id="proposed_deal_list"></div>
 		</div>
-		<div class="deal" id="subsidy_list"></div>
-		<div class="deal" id="active_deal_list"></div>
-		<div class="deal" id="proposed_deal_list"></div>
 	</div>
 	</div>