From patchwork Sun Dec 31 05:23:11 2023 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Mike Frysinger X-Patchwork-Id: 83049 Return-Path: X-Original-To: patchwork@sourceware.org Delivered-To: patchwork@sourceware.org Received: from server2.sourceware.org (localhost [IPv6:::1]) by sourceware.org (Postfix) with ESMTP id C3FEB3858C31 for ; Sun, 31 Dec 2023 05:23:39 +0000 (GMT) X-Original-To: gdb-patches@sourceware.org Delivered-To: gdb-patches@sourceware.org Received: from smtp.gentoo.org (woodpecker.gentoo.org [140.211.166.183]) by sourceware.org (Postfix) with ESMTP id 00FDD3858D1E for ; Sun, 31 Dec 2023 05:23:13 +0000 (GMT) DMARC-Filter: OpenDMARC Filter v1.4.2 sourceware.org 00FDD3858D1E Authentication-Results: sourceware.org; dmarc=pass (p=none dis=none) header.from=gentoo.org Authentication-Results: sourceware.org; spf=pass smtp.mailfrom=gentoo.org ARC-Filter: OpenARC Filter v1.0.0 sourceware.org 00FDD3858D1E Authentication-Results: server2.sourceware.org; arc=none smtp.remote-ip=140.211.166.183 ARC-Seal: i=1; a=rsa-sha256; d=sourceware.org; s=key; t=1704000197; cv=none; b=FSW7P1NV94e8cV+wnp++VQE514gj3xZFUEfzmy97pgoOWgPmrroem8ljGsZqDxlwue+kIZqQxmvA2tLDjySJ9fJTdzErhvlgjhFjEZDU3dbc4LHFRazydpB/R2fs/IfE7pgwrsLaxa7wExv7dXNJ2c9gkaMWiniA29SFeXAEaHI= ARC-Message-Signature: i=1; a=rsa-sha256; d=sourceware.org; s=key; t=1704000197; c=relaxed/simple; bh=4oxEyzLYXKiipbWujRfcY6aOO98tutlCAfpIshdV33w=; h=From:To:Subject:Date:Message-ID:MIME-Version; b=sgmyxfdTk27RZHT2BEqg8Xrbrmv/x6vHfMT8+Uljdf3P0Hiu7lq9swoBQWw1LWcI7DqGAZ00eAD7s5AuqkidTdiNYquWeWRxSo2Zkxn6/a00cjSybTpZh4kPbOFQUEZEJ+itwyL+u5Cur4pt0EcKV0fzKhp4BFPk24KjnTIqZWY= ARC-Authentication-Results: i=1; server2.sourceware.org Received: by smtp.gentoo.org (Postfix, from userid 559) id 8F215335D76; Sun, 31 Dec 2023 05:23:13 +0000 (UTC) From: Mike Frysinger To: gdb-patches@sourceware.org Subject: [PATCH htdocs] schedule: wrap long table for smaller screens Date: Sun, 31 Dec 2023 00:23:11 -0500 Message-ID: <20231231052311.24454-1-vapier@gentoo.org> X-Mailer: git-send-email 2.43.0 MIME-Version: 1.0 X-Spam-Status: No, score=-9.4 required=5.0 tests=BAYES_20, GIT_PATCH_0, JMQ_SPF_NEUTRAL, KAM_DMARC_STATUS, RCVD_IN_MSPIKE_H3, RCVD_IN_MSPIKE_WL, SPF_HELO_PASS, SPF_PASS, TXREP, T_SCC_BODY_TEXT_LINE autolearn=ham autolearn_force=no version=3.4.6 X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on server2.sourceware.org X-BeenThere: gdb-patches@sourceware.org X-Mailman-Version: 2.1.30 Precedence: list List-Id: Gdb-patches mailing list List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: gdb-patches-bounces+patchwork=sourceware.org@sourceware.org The current table is comfortable on wider screens, but on anything smaller than ~768px (e.g. most phones), the table exceeds the screen and is difficult to read. In this case, switch the table to flexbox so that the last column (the long comment text) is allowed to wrap into a row all by itself and take up the entire width of the screen. This makes reading on small devices much more manageable. CSS flexbox has been common since 2020, but if the browser doesn't support it, then it would be ignored and the current table layout continues to work as-is. --- css/schedule.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/css/schedule.css b/css/schedule.css index a5cc139bbe7e..37ca821d7192 100644 --- a/css/schedule.css +++ b/css/schedule.css @@ -40,3 +40,27 @@ table#history tr > td:nth-child(6) { text-align: left; white-space: normal; } + +/* This is ~768px with 16pt font. */ +@media only screen and (max-width: 50em) { + /* Allow the comment field to wrap onto a row by itself. */ + table#history tr { + display: flex; + flex-flow: row wrap; + width: 100%; + } + + table#history th, + table#history td { + flex: 1 1 15%; + order: 1; + } + + table#history tr > th:nth-child(6), + table#history tr > td:nth-child(6) { + flex: 5 1 100%; + order: 5; + padding-bottom: 1em; + padding-left: 1em; + } +}