Ensure all rows contain a column

As this helps with the layout, especially the whitespace to the left
on smaller screens.

1 files changed, 503 insertions, 455 deletions

diff --git a/guix-data-service/web/view/html.scm b/guix-data-service/web/view/html.scm
index ecc0738..e320648 100644
--- a/guix-data-service/web/view/html.scm
+++ b/guix-data-service/web/view/html.scm
@@ -99,80 +99,88 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h1 "Guix Data Service"))
+       (div
+        (@ (class "col-sm-12"))
+        (h1 "Guix Data Service")))
       (div
        (@ (class "row"))
-       (form
-        (@ (id "compare")
-           (action "/compare"))
-        (div
-         (@ (class "col-md-6"))
+       (div
+        (@ (class "col-sm-12"))
+        (form
+         (@ (id "compare")
+            (action "/compare"))
          (div
-          (@ (class "form-group"))
-          (label (@ (for "base_commit"))
-                 "Base commit")
-          (input (@ (type "text")
-                    (class "form-control")
-                    (id   "base_commit")
-                    (name "base_commit")
-                    (placeholder "base commit"))))
+          (@ (class "col-md-6"))
+          (div
+           (@ (class "form-group"))
+           (label (@ (for "base_commit"))
+                  "Base commit")
+           (input (@ (type "text")
+                     (class "form-control")
+                     (id   "base_commit")
+                     (name "base_commit")
+                     (placeholder "base commit"))))
+          (div
+           (@ (class "form-group"))
+           (label (@ (for "target_commit"))
+                  "Target commit")
+           (input (@ (type "text")
+                     (class "form-control")
+                     (id   "target_commit")
+                     (name "target_commit")
+                     (placeholder "target commit")))))
          (div
-          (@ (class "form-group"))
-          (label (@ (for "target_commit"))
-                 "Target commit")
-          (input (@ (type "text")
-                    (class "form-control")
-                    (id   "target_commit")
-                    (name "target_commit")
-                    (placeholder "target commit")))))
-        (div
-         (@ (class "col-md-6"))
-         (button
-          (@ (type "submit")
-             (class "btn btn-lg btn-primary"))
-          "Compare"))))
+          (@ (class "col-md-6"))
+          (button
+           (@ (type "submit")
+              (class "btn btn-lg btn-primary"))
+           "Compare")))))
       (div
        (@ (class "row"))
-       (h3 "Recent fetched revisions")
-       ,(if (null? guix-revisions)
-            '(p "No revisions")
-            `(table
-              (@ (class "table"))
-              (thead
-               (tr
-                (th (@ (class "col-md-6")) "Source Repository URL")
-                (th (@ (class "col-md-6")) "Commit")))
-              (tbody
-               ,@(map
-                  (match-lambda
-                    ((id url commit store_path)
-                     `(tr
-                       (td ,url)
-                       (td (a (@ (href ,(string-append
-                                         "/revision/" commit)))
-                              (samp ,commit))))))
-                  guix-revisions)))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Recent fetched revisions")
+        ,(if (null? guix-revisions)
+             '(p "No revisions")
+             `(table
+               (@ (class "table"))
+               (thead
+                (tr
+                 (th (@ (class "col-md-6")) "Source Repository URL")
+                 (th (@ (class "col-md-6")) "Commit")))
+               (tbody
+                ,@(map
+                   (match-lambda
+                     ((id url commit store_path)
+                      `(tr
+                        (td ,url)
+                        (td (a (@ (href ,(string-append
+                                          "/revision/" commit)))
+                               (samp ,commit))))))
+                   guix-revisions))))))
       (div
        (@ (class "row"))
-       (h3 "Queued revisions")
-       ,(if (null? queued-guix-revisions)
-            '(p "No queued revisions")
-            `(table
-              (@ (class "table"))
-              (thead
-               (tr
-                (th (@ (class "col-md-4")) "Source Repository URL")
-                (th (@ (class "col-md-4")) "Commit")
-                (th (@ (class "col-md-4")) "Source")))
-              (tbody
-               ,@(map
-                  (match-lambda
-                    ((id url commit source)
-                     `(tr
-                       (td ,url)
-                       (td (samp ,commit))
-                       (td ,source))))
-                  queued-guix-revisions)))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Queued revisions")
+        ,(if (null? queued-guix-revisions)
+             '(p "No queued revisions")
+             `(table
+               (@ (class "table"))
+               (thead
+                (tr
+                 (th (@ (class "col-md-4")) "Source Repository URL")
+                 (th (@ (class "col-md-4")) "Commit")
+                 (th (@ (class "col-md-4")) "Source")))
+               (tbody
+                ,@(map
+                   (match-lambda
+                     ((id url commit source)
+                      `(tr
+                        (td ,url)
+                        (td (samp ,commit))
+                        (td ,source))))
+                   queued-guix-revisions))))))))))
 
 (define (view-revision-package-and-version revision-commit-hash name version
                                            package-metadata
@@ -186,46 +194,54 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h3 (a (@ (href ,(string-append
-                         "/revision/" revision-commit-hash)))
-              "Revision " (samp ,revision-commit-hash))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 (a (@ (href ,(string-append
+                          "/revision/" revision-commit-hash)))
+               "Revision " (samp ,revision-commit-hash)))))
       (div
        (@ (class "row"))
-       (h1 "Package " ,name " @ " ,version))
+       (div
+        (@ (class "col-sm-12"))
+        (h1 "Package " ,name " @ " ,version)))
       (div
        (@ (class "row"))
-       ,(match package-metadata
-          (((synopsis description home-page))
-           `(dl
-             (@ (class "dl-horizontal"))
-             (dt "Synopsis")
-             (dd ,(stexi->shtml (texi-fragment->stexi synopsis)))
-             (dt "Description")
-             (dd ,(stexi->shtml (texi-fragment->stexi description)))
-             (dt "Home page")
-             (dd (a (@ (href ,home-page))
-                    ,home-page))))))
+       (div
+        (@ (class "col-sm-12"))
+        ,(match package-metadata
+           (((synopsis description home-page))
+            `(dl
+              (@ (class "dl-horizontal"))
+              (dt "Synopsis")
+              (dd ,(stexi->shtml (texi-fragment->stexi synopsis)))
+              (dt "Description")
+              (dd ,(stexi->shtml (texi-fragment->stexi description)))
+              (dt "Home page")
+              (dd (a (@ (href ,home-page))
+                     ,home-page)))))))
       (div
        (@ (class "row"))
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th "System")
-          (th "Target")
-          (th "Derivation")
-          (th "Build status")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((system target file-name status)
-               `(tr
-                 (td (samp ,system))
-                 (td (samp ,target))
-                 (td (a (@ (href ,file-name))
-                        ,(display-store-item-short file-name)))
-                 (td ,(build-status-span status)))))
-            derivations))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th "System")
+           (th "Target")
+           (th "Derivation")
+           (th "Build status")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((system target file-name status)
+                `(tr
+                  (td (samp ,system))
+                  (td (samp ,target))
+                  (td (a (@ (href ,file-name))
+                         ,(display-store-item-short file-name)))
+                  (td ,(build-status-span status)))))
+             derivations)))))))))
 
 (define (view-revision commit-hash packages-count derivations-count)
   (layout
@@ -288,34 +304,38 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h3 (a (@ (href ,(string-append
-                         "/revision/" revision-commit-hash)))
-              "Revision " (samp ,revision-commit-hash))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 (a (@ (href ,(string-append
+                          "/revision/" revision-commit-hash)))
+               "Revision " (samp ,revision-commit-hash)))))
       (div
        (@ (class "row"))
-       (h1 "Packages")
-       (table
-        (@ (class "table table-responsive"))
-        (thead
-         (tr
-          (th (@ (class "col-md-3")) "Name")
-          (th (@ (class "col-md-3")) "Version")
-          (th (@ (class "col-md-3")) "Synopsis")
-          (th (@ (class "col-md-3")) "")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((name version synopsis)
-               `(tr
-                 (td ,name)
-                 (td ,version)
-                 (td ,(stexi->shtml (texi-fragment->stexi synopsis)))
-                 (td (@ (class "text-right"))
-                     (a (@ (href ,(string-append
-                                   "/revision/" revision-commit-hash
-                                   "/package/" name "/" version)))
-                        "More information")))))
-            packages))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (h1 "Packages")
+        (table
+         (@ (class "table table-responsive"))
+         (thead
+          (tr
+           (th (@ (class "col-md-3")) "Name")
+           (th (@ (class "col-md-3")) "Version")
+           (th (@ (class "col-md-3")) "Synopsis")
+           (th (@ (class "col-md-3")) "")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((name version synopsis)
+                `(tr
+                  (td ,name)
+                  (td ,version)
+                  (td ,(stexi->shtml (texi-fragment->stexi synopsis)))
+                  (td (@ (class "text-right"))
+                      (a (@ (href ,(string-append
+                                    "/revision/" revision-commit-hash
+                                    "/package/" name "/" version)))
+                         "More information")))))
+             packages)))))))))
 
 (define (view-builds stats builds)
   (layout
@@ -327,48 +347,52 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h1 "Builds")
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-md-2")) "Status")
-          (th (@ (class "col-md-2")) "Count")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((status count)
-               `(tr
-                 (td ,(build-status-span status))
-                 (td ,count))))
-            stats))))
+       (div
+        (@ (class "col-sm-12"))
+        (h1 "Builds")
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-md-2")) "Status")
+           (th (@ (class "col-md-2")) "Count")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((status count)
+                `(tr
+                  (td ,(build-status-span status))
+                  (td ,count))))
+             stats)))))
       (div
        (@ (class "row"))
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-xs-2")) "Status")
-          (th (@ (class "col-xs-9")) "Derivation")
-          (th (@ (class "col-xs-1")) "Started at")
-          (th (@ (class "col-xs-1")) "Finished at")
-          (th (@ (class "col-xs-1")) "")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((build-id build-server-url derivation-file-name
-                         status-fetched-at starttime stoptime status)
-               `(tr
-                 (td (@ (class "text-center"))
-                     ,(build-status-span status))
-                 (td (a (@ (href ,derivation-file-name))
-                        ,(display-store-item-short derivation-file-name)))
-                 (td ,starttime)
-                 (td ,stoptime)
-                 (td (a (@ (href ,(simple-format
-                                   #f "~Abuild/~A" build-server-url build-id)))
-                        "View build on " ,build-server-url)))))
-            builds))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-xs-2")) "Status")
+           (th (@ (class "col-xs-9")) "Derivation")
+           (th (@ (class "col-xs-1")) "Started at")
+           (th (@ (class "col-xs-1")) "Finished at")
+           (th (@ (class "col-xs-1")) "")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((build-id build-server-url derivation-file-name
+                          status-fetched-at starttime stoptime status)
+                `(tr
+                  (td (@ (class "text-center"))
+                      ,(build-status-span status))
+                  (td (a (@ (href ,derivation-file-name))
+                         ,(display-store-item-short derivation-file-name)))
+                  (td ,starttime)
+                  (td ,stoptime)
+                  (td (a (@ (href ,(simple-format
+                                    #f "~Abuild/~A" build-server-url build-id)))
+                         "View build on " ,build-server-url)))))
+             builds)))))))))
 
 (define (build-status-value->display-string value)
   (assoc-ref
@@ -435,32 +459,34 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       ,(display-store-item-title filename))
-      ,@(map (lambda (derivation derivations-using-store-item)
-               `((div
-                  (@ (class "row"))
-                  (h4 "Derivation: ")
-                  ,(match derivation
-                     ((file-name output-id)
-                      `(a (@ (href ,file-name))
-                          ,(display-store-item file-name)))))
-                 (div
-                  (@ (class "row"))
-                  (h2 "Derivations using this store item "
-                      ,(let ((count (length derivations-using-store-item)))
-                         (if (eq? count 100)
-                             "(> 100)"
-                             (simple-format #f "(~A)" count))))
-                  (ul
-                   (@ (class "list-unstyled"))
-                   ,(map
-                     (match-lambda
-                       ((file-name)
-                        `(li (a (@ (href ,file-name))
-                                ,(display-store-item file-name)))))
-                     derivations-using-store-item)))))
-             derivations
-             derivations-using-store-item-list)))))
+       (div
+        (@ (class "col-sm-12"))
+        ,(display-store-item-title filename))
+       ,@(map (lambda (derivation derivations-using-store-item)
+                `((div
+                   (@ (class "row"))
+                   (h4 "Derivation: ")
+                   ,(match derivation
+                      ((file-name output-id)
+                       `(a (@ (href ,file-name))
+                           ,(display-store-item file-name)))))
+                  (div
+                   (@ (class "row"))
+                   (h2 "Derivations using this store item "
+                       ,(let ((count (length derivations-using-store-item)))
+                          (if (eq? count 100)
+                              "(> 100)"
+                              (simple-format #f "(~A)" count))))
+                   (ul
+                    (@ (class "list-unstyled"))
+                    ,(map
+                      (match-lambda
+                        ((file-name)
+                         `(li (a (@ (href ,file-name))
+                                 ,(display-store-item file-name)))))
+                      derivations-using-store-item)))))
+              derivations
+              derivations-using-store-item-list))))))
 
 (define (view-derivation derivation derivation-inputs derivation-outputs
                          builds)
@@ -560,173 +586,185 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h1 (@ (class "pull-left"))
-           "Comparing "
-           (samp ,(string-take base-commit 8) "…")
-           " and "
-           (samp ,(string-take target-commit 8) "…"))
        (div
-        (@ (class "btn-group-vertical btn-group-lg pull-right")
-           (style "margin-top: 2em;")
-           (role "group"))
-        (a (@ (class "btn btn-default")
-              (href ,(string-append "/compare/packages" query-params)))
-           "Compare packages")
-        (a (@ (class "btn btn-default")
-              (href ,(string-append "/compare/derivations" query-params)))
-           "Compare derivations")))
+        (@ (class "col-sm-12"))
+        (h1 (@ (class "pull-left"))
+            "Comparing "
+            (samp ,(string-take base-commit 8) "…")
+            " and "
+            (samp ,(string-take target-commit 8) "…"))
+        (div
+         (@ (class "btn-group-vertical btn-group-lg pull-right")
+            (style "margin-top: 2em;")
+            (role "group"))
+         (a (@ (class "btn btn-default")
+               (href ,(string-append "/compare/packages" query-params)))
+            "Compare packages")
+         (a (@ (class "btn btn-default")
+               (href ,(string-append "/compare/derivations" query-params)))
+            "Compare derivations"))))
       (div
        (@ (class "row") (style "clear: left;"))
-       (a (@ (class "btn btn-default btn-lg")
-             (href ,(string-append
-                     "/compare.json" query-params)))
-          "View JSON"))
+       (div
+        (@ (class "col-sm-12"))
+        (a (@ (class "btn btn-default btn-lg")
+              (href ,(string-append
+                      "/compare.json" query-params)))
+           "View JSON")))
       (div
        (@ (class "row"))
-       (h3 (@ (style "clear: both;"))
-           "New packages")
-       ,(if (null? new-packages)
-            '(p "No new packages")
-            `(table
-              (@ (class "table"))
-              (thead
-               (tr
-                (th (@ (class "col-md-3")) "Name")
-                (th (@ (class "col-md-9")) "Version")))
-              (tbody
-               ,@(map
-                  (match-lambda
-                    ((('name . name)
-                      ('version . version))
-                     `(tr
-                       (td ,name)
-                       (td ,version))))
-                  new-packages)))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 (@ (style "clear: both;"))
+            "New packages")
+        ,(if (null? new-packages)
+             '(p "No new packages")
+             `(table
+               (@ (class "table"))
+               (thead
+                (tr
+                 (th (@ (class "col-md-3")) "Name")
+                 (th (@ (class "col-md-9")) "Version")))
+               (tbody
+                ,@(map
+                   (match-lambda
+                     ((('name . name)
+                       ('version . version))
+                      `(tr
+                        (td ,name)
+                        (td ,version))))
+                   new-packages))))))
       (div
        (@ (class "row"))
-       (h3 "Removed packages")
-       ,(if (null? removed-packages)
-            '(p "No removed packages")
-            `(table
-              (@ (class "table"))
-              (thead
-               (tr
-                (th (@ (class "col-md-3")) "Name")
-                (th (@ (class "col-md-9")) "Version")))
-              (tbody
-               ,@(map
-                  (match-lambda
-                    ((('name . name)
-                      ('version . version))
-                     `(tr
-                       (td ,name)
-                       (td ,version))))
-                  removed-packages)))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Removed packages")
+        ,(if (null? removed-packages)
+             '(p "No removed packages")
+             `(table
+               (@ (class "table"))
+               (thead
+                (tr
+                 (th (@ (class "col-md-3")) "Name")
+                 (th (@ (class "col-md-9")) "Version")))
+               (tbody
+                ,@(map
+                   (match-lambda
+                     ((('name . name)
+                       ('version . version))
+                      `(tr
+                        (td ,name)
+                        (td ,version))))
+                   removed-packages))))))
       (div
        (@ (class "row"))
-       (h3 "Version changes")
-       ,(if (null? version-changes)
-            '(p "No version changes")
-            `(table
-              (@ (class "table"))
-              (thead
-               (tr
-                (th (@ (class "col-md-3")) "Name")
-                (th (@ (class "col-md-9")) "Versions")))
-              (tbody
-               ,@(map
-                  (match-lambda
-                    ((name . versions)
-                     `(tr
-                       (td ,name)
-                       (td (ul
-                            ,@(map (match-lambda
-                                     ((type . versions)
-                                      `(li (@ (class ,(if (eq? type 'base)
-                                                          "text-danger"
-                                                          "text-success")))
-                                           ,(string-join
-                                             (vector->list versions)
-                                             ", ")
-                                           ,(if (eq? type 'base)
-                                                " (old)"
-                                                " (new)"))))
-                                   versions))))))
-                  version-changes)))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Version changes")
+        ,(if (null? version-changes)
+             '(p "No version changes")
+             `(table
+               (@ (class "table"))
+               (thead
+                (tr
+                 (th (@ (class "col-md-3")) "Name")
+                 (th (@ (class "col-md-9")) "Versions")))
+               (tbody
+                ,@(map
+                   (match-lambda
+                     ((name . versions)
+                      `(tr
+                        (td ,name)
+                        (td (ul
+                             ,@(map (match-lambda
+                                      ((type . versions)
+                                       `(li (@ (class ,(if (eq? type 'base)
+                                                           "text-danger"
+                                                           "text-success")))
+                                            ,(string-join
+                                              (vector->list versions)
+                                              ", ")
+                                            ,(if (eq? type 'base)
+                                                 " (old)"
+                                                 " (new)"))))
+                                    versions))))))
+                   version-changes))))))
       (div
        (@ (class "row"))
-       (h3 "Package derivation changes")
-       ,(if
-         (null? derivation-changes)
-         '(p "No derivation changes")
-         `(table
-           (@ (class "table")
-              (style "table-layout: fixed;"))
-           (thead
-            (tr
-             (th "Name")
-             (th "Version")
-             (th "System")
-             (th "Target")
-             (th (@ (class "col-xs-5")) "Derivations")))
-           (tbody
-            ,@(append-map
-               (match-lambda
-                 ((('name . name)
-                   ('version . version)
-                   ('base . base-derivations)
-                   ('target . target-derivations))
-                  (let* ((system-and-versions
-                          (delete-duplicates
-                           (append (map (lambda (details)
-                                          (cons (assq-ref details 'system)
-                                                (assq-ref details 'target)))
-                                        (vector->list base-derivations))
-                                   (map (lambda (details)
-                                          (cons (assq-ref details 'system)
-                                                (assq-ref details 'target)))
-                                        (vector->list target-derivations)))))
-                         (data-columns
-                          (map
-                           (match-lambda
-                             ((system . target)
-                              (let ((base-derivation-file-name
-                                     (assq-ref (find (lambda (details)
-                                                       (and (string=? (assq-ref details 'system) system)
-                                                            (string=? (assq-ref details 'target) target)))
-                                                     (vector->list base-derivations))
-                                               'derivation-file-name))
-                                    (target-derivation-file-name
-                                     (assq-ref (find (lambda (details)
-                                                       (and (string=? (assq-ref details 'system) system)
-                                                            (string=? (assq-ref details 'target) target)))
-                                                     (vector->list target-derivations))
-                                               'derivation-file-name)))
-                                `((td (samp (@ (style "white-space: nowrap;"))
-                                            ,system))
-                                  (td (samp (@ (style "white-space: nowrap;"))
-                                            ,target))
-                                  (td (a (@ (style "display: block;")
-                                            (href ,base-derivation-file-name))
-                                         (span (@ (class "text-danger glyphicon glyphicon-minus pull-left")
-                                                  (style "font-size: 1.5em; padding-right: 0.4em;")))
-                                         ,(display-store-item-short base-derivation-file-name))
-                                      (a (@ (style "display: block;")
-                                            (href ,target-derivation-file-name))
-                                         (span (@ (class "text-success glyphicon glyphicon-plus pull-left")
-                                                  (style "font-size: 1.5em; padding-right: 0.4em;")))
-                                         ,(display-store-item-short target-derivation-file-name)))))))
-                           system-and-versions)))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Package derivation changes")
+        ,(if
+          (null? derivation-changes)
+          '(p "No derivation changes")
+          `(table
+            (@ (class "table")
+               (style "table-layout: fixed;"))
+            (thead
+             (tr
+              (th "Name")
+              (th "Version")
+              (th "System")
+              (th "Target")
+              (th (@ (class "col-xs-5")) "Derivations")))
+            (tbody
+             ,@(append-map
+                (match-lambda
+                  ((('name . name)
+                    ('version . version)
+                    ('base . base-derivations)
+                    ('target . target-derivations))
+                   (let* ((system-and-versions
+                           (delete-duplicates
+                            (append (map (lambda (details)
+                                           (cons (assq-ref details 'system)
+                                                 (assq-ref details 'target)))
+                                         (vector->list base-derivations))
+                                    (map (lambda (details)
+                                           (cons (assq-ref details 'system)
+                                                 (assq-ref details 'target)))
+                                         (vector->list target-derivations)))))
+                          (data-columns
+                           (map
+                            (match-lambda
+                              ((system . target)
+                               (let ((base-derivation-file-name
+                                      (assq-ref (find (lambda (details)
+                                                        (and (string=? (assq-ref details 'system) system)
+                                                             (string=? (assq-ref details 'target) target)))
+                                                      (vector->list base-derivations))
+                                                'derivation-file-name))
+                                     (target-derivation-file-name
+                                      (assq-ref (find (lambda (details)
+                                                        (and (string=? (assq-ref details 'system) system)
+                                                             (string=? (assq-ref details 'target) target)))
+                                                      (vector->list target-derivations))
+                                                'derivation-file-name)))
+                                 `((td (samp (@ (style "white-space: nowrap;"))
+                                             ,system))
+                                   (td (samp (@ (style "white-space: nowrap;"))
+                                             ,target))
+                                   (td (a (@ (style "display: block;")
+                                             (href ,base-derivation-file-name))
+                                          (span (@ (class "text-danger glyphicon glyphicon-minus pull-left")
+                                                   (style "font-size: 1.5em; padding-right: 0.4em;")))
+                                          ,(display-store-item-short base-derivation-file-name))
+                                       (a (@ (style "display: block;")
+                                             (href ,target-derivation-file-name))
+                                          (span (@ (class "text-success glyphicon glyphicon-plus pull-left")
+                                                   (style "font-size: 1.5em; padding-right: 0.4em;")))
+                                          ,(display-store-item-short target-derivation-file-name)))))))
+                            system-and-versions)))
 
-                    `((tr (td (@ (rowspan , (length system-and-versions)))
-                              ,name)
-                          (td (@ (rowspan , (length system-and-versions)))
-                              ,version)
-                          ,@(car data-columns))
-                      ,@(map (lambda (data-row)
-                               `(tr ,data-row))
-                             (cdr data-columns))))))
-               (vector->list derivation-changes))))))))))
+                     `((tr (td (@ (rowspan , (length system-and-versions)))
+                               ,name)
+                           (td (@ (rowspan , (length system-and-versions)))
+                               ,version)
+                           ,@(car data-columns))
+                       ,@(map (lambda (data-row)
+                                `(tr ,data-row))
+                              (cdr data-columns))))))
+                (vector->list derivation-changes)))))))))))
 
 (define (compare/derivations valid-systems
                              valid-build-statuses
@@ -883,54 +921,58 @@
              "View JSON")))))
       (div
        (@ (class "row"))
-       (h3 "Base ("
-           (samp ,base-commit)
-           ")")
-       (p "Derivations found only in the base revision.")
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-md-6")) "File Name")
-          (th (@ (class "col-md-2")) "System")
-          (th (@ (class "col-md-2")) "Target")
-          (th (@ (class "col-md-4")) "Build status")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((file-name system target build-status)
-               `(tr
-                 (td (a (@ (href ,file-name))
-                        ,(display-store-item-short file-name)))
-                 (td (samp ,system))
-                 (td (samp ,target))
-                 (td ,(build-status-span build-status)))))
-            base-derivations))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Base ("
+            (samp ,base-commit)
+            ")")
+        (p "Derivations found only in the base revision.")
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-md-6")) "File Name")
+           (th (@ (class "col-md-2")) "System")
+           (th (@ (class "col-md-2")) "Target")
+           (th (@ (class "col-md-4")) "Build status")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((file-name system target build-status)
+                `(tr
+                  (td (a (@ (href ,file-name))
+                         ,(display-store-item-short file-name)))
+                  (td (samp ,system))
+                  (td (samp ,target))
+                  (td ,(build-status-span build-status)))))
+             base-derivations)))))
       (div
        (@ (class "row"))
-       (h3 "Target ("
-           (samp ,target-commit)
-           ")")
-       (p "Derivations found only in the target revision.")
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-md-8")) "File Name")
-          (th (@ (class "col-md-2")) "System")
-          (th (@ (class "col-md-2")) "Target")
-          (th (@ (class "col-md-4")) "Build status")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((file-name system target build-status)
-               `(tr
-                 (td (a (@ (href ,file-name))
-                        ,(display-store-item-short file-name)))
-                 (td (samp ,system))
-                 (td (samp ,target))
-                 (td ,(build-status-span build-status)))))
-            target-derivations))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Target ("
+            (samp ,target-commit)
+            ")")
+        (p "Derivations found only in the target revision.")
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-md-8")) "File Name")
+           (th (@ (class "col-md-2")) "System")
+           (th (@ (class "col-md-2")) "Target")
+           (th (@ (class "col-md-4")) "Build status")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((file-name system target build-status)
+                `(tr
+                  (td (a (@ (href ,file-name))
+                         ,(display-store-item-short file-name)))
+                  (td (samp ,system))
+                  (td (samp ,target))
+                  (td ,(build-status-span build-status)))))
+             target-derivations)))))))))
 
 (define (compare/packages base-commit
                           target-commit
@@ -949,72 +991,78 @@
       (@ (class "container"))
       (div
        (@ (class "row"))
-       (h1 "Comparing "
-           (samp ,(string-take base-commit 8) "…")
-           " and "
-           (samp ,(string-take target-commit 8) "…"))
-       (a (@ (class "btn btn-default btn-lg")
-             (href ,(string-append
-                     "/compare/packages.json" query-params)))
-          "View JSON"))
+       (div
+        (@ (class "col-sm-12"))
+        (h1 "Comparing "
+            (samp ,(string-take base-commit 8) "…")
+            " and "
+            (samp ,(string-take target-commit 8) "…"))
+        (a (@ (class "btn btn-default btn-lg")
+              (href ,(string-append
+                      "/compare/packages.json" query-params)))
+           "View JSON")))
       (div
        (@ (class "row"))
-       (h3 "Base ("
-           (samp ,base-commit)
-           ")")
-       (p "Packages found in the base revision.")
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-md-4")) "Name")
-          (th (@ (class "col-md-4")) "Version")
-          (th (@ (class "col-md-4")) "")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((name version)
-               `(tr
-                 (td ,name)
-                 (td ,version)
-                 (td (@ (class "text-right"))
-                     (a (@ (href ,(string-append
-                                   "/revision/" base-commit
-                                   "/package/" name "/" version)))
-                        "More information")))))
-            (delete-duplicates
-             (map (lambda (data)
-                    (take data 2))
-                  (vlist->list base-packages-vhash)))))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Base ("
+            (samp ,base-commit)
+            ")")
+        (p "Packages found in the base revision.")
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-md-4")) "Name")
+           (th (@ (class "col-md-4")) "Version")
+           (th (@ (class "col-md-4")) "")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((name version)
+                `(tr
+                  (td ,name)
+                  (td ,version)
+                  (td (@ (class "text-right"))
+                      (a (@ (href ,(string-append
+                                    "/revision/" base-commit
+                                    "/package/" name "/" version)))
+                         "More information")))))
+             (delete-duplicates
+              (map (lambda (data)
+                     (take data 2))
+                   (vlist->list base-packages-vhash))))))))
       (div
        (@ (class "row"))
-       (h3 "Target ("
-           (samp ,target-commit)
-           ")")
-       (p "Packages found in the target revision.")
-       (table
-        (@ (class "table"))
-        (thead
-         (tr
-          (th (@ (class "col-md-4")) "Name")
-          (th (@ (class "col-md-4")) "Version")
-          (th (@ (class "col-md-4")) "")))
-        (tbody
-         ,@(map
-            (match-lambda
-              ((name version)
-               `(tr
-                 (td ,name)
-                 (td ,version)
-                 (td (@ (class "text-right"))
-                     (a (@ (href ,(string-append
-                                   "/revision/" base-commit
-                                   "/package/" name "/" version)))
-                        "More information")))))
-            (delete-duplicates
-             (map (lambda (data)
-                    (take data 2))
-                  (vlist->list target-packages-vhash)))))))))))
+       (div
+        (@ (class "col-sm-12"))
+        (h3 "Target ("
+            (samp ,target-commit)
+            ")")
+        (p "Packages found in the target revision.")
+        (table
+         (@ (class "table"))
+         (thead
+          (tr
+           (th (@ (class "col-md-4")) "Name")
+           (th (@ (class "col-md-4")) "Version")
+           (th (@ (class "col-md-4")) "")))
+         (tbody
+          ,@(map
+             (match-lambda
+               ((name version)
+                `(tr
+                  (td ,name)
+                  (td ,version)
+                  (td (@ (class "text-right"))
+                      (a (@ (href ,(string-append
+                                    "/revision/" base-commit
+                                    "/package/" name "/" version)))
+                         "More information")))))
+             (delete-duplicates
+              (map (lambda (data)
+                     (take data 2))
+                   (vlist->list target-packages-vhash))))))))))))
 
 (define (compare-unknown-commit base-commit target-commit
                                 base-exists? target-exists?