diff --git a/Documentation/developer-guide.md b/Documentation/developer-guide.md
index d36a24d..0a96b3a 100644
--- a/Documentation/developer-guide.md
+++ b/Documentation/developer-guide.md
@@ -67,8 +67,8 @@
 ```
 
 This will recompile and start a development server.  Open
-http://localhost:8080/ to view your local copy of gitiles, which
-will serve any repositories under `/path/to/repositories`.
+http://localhost:8080/path/to/repositories to view your local copy of gitiles,
+which will serve any repositories under `/path/to/repositories`.
 
 Passing `--debug` option to `tools/run_dev.sh` will suspend the runtime until a
 remote debugger connects to port 5005. If you don't want to suspend the
diff --git a/java/com/google/gitiles/LogServlet.java b/java/com/google/gitiles/LogServlet.java
index 71f7384..368fd0b 100644
--- a/java/com/google/gitiles/LogServlet.java
+++ b/java/com/google/gitiles/LogServlet.java
@@ -191,10 +191,14 @@
     if (headRef == null) {
       return null;
     }
+    ObjectId id = headRef.getObjectId();
+    if (id == null) {
+      return null;
+    }
     try (RevWalk walk = new RevWalk(repo)) {
       return GitilesView.log()
           .copyFrom(view)
-          .setRevision(Revision.peel(Constants.HEAD, walk.parseAny(headRef.getObjectId()), walk))
+          .setRevision(Revision.peel(Constants.HEAD, walk.parseAny(id), walk))
           .build();
     }
   }
diff --git a/javatests/com/google/gitiles/LogServletTest.java b/javatests/com/google/gitiles/LogServletTest.java
index 93bf80a..7d75849 100644
--- a/javatests/com/google/gitiles/LogServletTest.java
+++ b/javatests/com/google/gitiles/LogServletTest.java
@@ -37,9 +37,9 @@
 public class LogServletTest extends ServletTest {
   private static final TypeToken<Log> LOG = new TypeToken<Log>() {};
   private static final String MAIN = "main";
-  private static final String AUTHOR_METADATA_ELEMENT = "<th class=\"Metadata-title\">author</th>";
+  private static final String AUTHOR_METADATA_ELEMENT = "<dt class=\"Metadata-title\">author</dt>";
   private static final String COMMITTER_METADATA_ELEMENT =
-      "<th class=\"Metadata-title\">committer</th>";
+      "<dt class=\"Metadata-title\">committer</dt>";
 
   @Test
   public void basicLog() throws Exception {
diff --git a/resources/com/google/gitiles/static/base.css b/resources/com/google/gitiles/static/base.css
index f4ef52a..7653f84 100644
--- a/resources/com/google/gitiles/static/base.css
+++ b/resources/com/google/gitiles/static/base.css
@@ -374,11 +374,29 @@
 .Metadata {
   margin-bottom: 15px;
 }
+.Metadata-descriptionList {
+  display: grid;
+  grid-template-columns: max-content minmax(auto, max-content) auto;
+  gap: 2px 12px;
+}
+.Metadata-row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+}
 .Metadata-title {
+  grid-column: 1;
   font-weight: bold;
-  padding-right: 10px;
   text-align: right;
 }
+.Metadata-description {
+  grid-column: 2 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+.Metadata-descriptionCell {
+  grid-column: auto;
+}
 .MetadataMessage {
   background-color: #fafafa;
   border: 1px solid #ccc;
@@ -485,6 +503,15 @@
   color: #666;
 }
 
+@media (max-width: 700px) {
+  .Metadata-descriptionList {
+    grid-template-columns: max-content auto;
+  }
+  .Metadata-descriptionCell {
+    grid-column: 2;
+  }
+}
+
 /* BlameDetail.soy */
 
 .Blame {
diff --git a/resources/com/google/gitiles/templates/LogDetail.soy b/resources/com/google/gitiles/templates/LogDetail.soy
index b82b2a4..05fc37c 100644
--- a/resources/com/google/gitiles/templates/LogDetail.soy
+++ b/resources/com/google/gitiles/templates/LogDetail.soy
@@ -254,62 +254,63 @@
       score: the similarity score of the rename or copy.
       */
 <div class="u-monospace Metadata">
-<table>
-  <tr>
-    <th class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</th>
-    <td class="sha1">
-      <a href="{$url}">{$sha}</a>
-    </td>
-    <td>
-      {if length($branches)}
-        {for $branch in $branches}
-          {sp}<a href="{$branch.url}" class="branch-label">{$branch.name}</a>
-        {/for}
-      {/if}
-      {if length($tags)}
-        {for $tag in $tags}
-          {sp}<a href="{$tag.url}" class="tag-label">{$tag.name}</a>
-        {/for}
-      {else}
-        {sp}
-      {/if}
-    </td>
-  </tr>
-  <tr>
-    <th class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</th>
-    <td>
-      {call objDetail.person_ data="$author" /}
-    </td>
-    <td>{$author.time}</td>
-  </tr>
-  <tr>
-    <th class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</th>
-    <td>
-      {call objDetail.person_ data="$committer" /}
-    </td>
-    <td>{$committer.time}</td>
-  </tr>
-  {if $rename}
-    <tr>
-      <td colspan="3">
-        <span class="CommitLog-rename">
-          [
-          {switch $rename.changeType}
-            {case 'RENAME'}
-              Renamed
-            {case 'COPY'}
-              Copied
-          {/switch}
-          {if $rename.score != 100}
-            {sp}({$rename.score}%)
-          {/if}
-          {sp}from {$rename.oldPath}]
-        </span>
-      </td>
-    </tr>
-  {/if}
-
-</table>
+<dl class="Metadata-descriptionList">
+  <div class="Metadata-row">
+    <dt class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</dt>
+    <dd class="Metadata-description">
+      <div class="sha1 Metadata-descriptionCell">
+        <a href="{$url}">{$sha}</a>
+      </div>
+      <div class="Metadata-descriptionCell">
+        {if length($branches)}
+          {for $branch in $branches}
+            {sp}<a href="{$branch.url}" class="branch-label">{$branch.name}</a>
+          {/for}
+        {/if}
+        {if length($tags)}
+          {for $tag in $tags}
+            {sp}<a href="{$tag.url}" class="tag-label">{$tag.name}</a>
+          {/for}
+        {else}
+          {sp}
+        {/if}
+      </div>
+    </dd>
+  </div>
+  <div class="Metadata-row">
+    <dt class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</dt>
+    <dd class="Metadata-description">
+      <div class="Metadata-descriptionCell">
+        {call objDetail.person_ data="$author" /}
+      </div>
+      <div class="Metadata-descriptionCell">{$author.time}</div>
+    </dd>
+  </div>
+  <div class="Metadata-row">
+    <dt class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</dt>
+    <dd class="Metadata-description">
+      <div class="Metadata-descriptionCell">
+        {call objDetail.person_ data="$committer" /}
+      </div>
+      <div class="Metadata-descriptionCell">{$committer.time}</div>
+    </dd>
+  </div>
+</dl>
+{if $rename}
+  <span class="CommitLog-rename">
+    [
+    {switch $rename.changeType}
+      {case 'RENAME'}
+        Renamed
+      {case 'COPY'}
+        Copied
+    {/switch}
+    {if $rename.score != 100}
+      {sp}({$rename.score}%)
+    {/if}
+    {sp}from {$rename.oldPath}]
+  </span>
+{/if}
 </div>
 <pre class="u-pre u-monospace MetadataMessage">
   {$message}
diff --git a/resources/com/google/gitiles/templates/ObjectDetail.soy b/resources/com/google/gitiles/templates/ObjectDetail.soy
index f7c0b0c..4fc83d8 100644
--- a/resources/com/google/gitiles/templates/ObjectDetail.soy
+++ b/resources/com/google/gitiles/templates/ObjectDetail.soy
@@ -44,52 +44,68 @@
   {@param archiveUrl: ?}  /** URL to a download link of this commit as an archive. */
   {@param archiveType: ?}  /** type of the archive to download. */
 <div class="u-monospace Metadata">
-  <table>
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</th>
-      <td>
-        {$sha}
-      </td>
-      <td>
-        <span>
-          [<a href="{$logUrl}">{msg desc="text for the log link"}log{/msg}</a>]
-        </span>
-        {sp}<span>[<a href="{$archiveUrl}">{$archiveType}</a>]</span>
-      </td>
-    </tr>
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</th>
-      <td>
-        {call person_ data="$author" /}
-      </td>
-      <td>{$author.time}</td>
-    </tr>
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</th>
-      <td>
-        {call person_ data="$committer" /}
-      </td>
-      <td>{$committer.time}</td>
-    </tr>
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for tree SHA entry"}tree{/msg}</th>
-      <td><a href="{$treeUrl}">{$tree}</a></td>
-    </tr>
-    {for $parent in $parents}
-      <tr>
-        <th class="Metadata-title">{msg desc="Header for parent SHA"}parent{/msg}</th>
-        <td>
-          <a href="{$parent.url}">{$parent.sha}</a>
-          {sp}<span>
-            [<a href="{$parent.diffUrl}">{msg desc="text for the parent diff link"}diff{/msg}</a>]
-            {if $parent.blameUrl != null}
-              {sp}[<a href="{$parent.blameUrl}">{msg desc="text for the parent blame link"}blame{/msg}</a>]
-            {/if}
+  <dl class="Metadata-descriptionList">
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for commit SHA entry"}commit{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="Metadata-descriptionCell">
+          {$sha}
+        </div>
+        <div class="Metadata-descriptionCell">
+          <span>
+            [<a href="{$logUrl}">{msg desc="text for the log link"}log{/msg}</a>]
           </span>
-        </td>
-      </tr>
+          {sp}<span>[<a href="{$archiveUrl}">{$archiveType}</a>]</span>
+        </div>
+      </dd>
+    </div>
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for commit author"}author{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="Metadata-descriptionCell">
+          {call person_ data="$author" /}
+        </div>
+        <div class="Metadata-descriptionCell">
+          {$author.time}
+        </div>
+      </dd>
+    </div>
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for committer"}committer{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="Metadata-descriptionCell">
+          {call person_ data="$committer" /}
+        </div>
+        <div class="Metadata-descriptionCell">
+          {$committer.time}
+        </div>
+      </dd>
+    </div>
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for tree SHA entry"}tree{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="Metadata-descriptionCell">
+          <a href="{$treeUrl}">{$tree}</a>
+        </div>
+      </dd>
+    </div>
+    {for $parent in $parents}
+      <div class="Metadata-row">
+        <dt class="Metadata-title">{msg desc="Header for parent SHA"}parent{/msg}</dt>
+        <dd class="Metadata-description">
+          <div class="Metadata-descriptionCell">
+            <a href="{$parent.url}">{$parent.sha}</a>
+            {sp}<span>
+              [<a href="{$parent.diffUrl}">{msg desc="text for the parent diff link"}diff{/msg}</a>]
+              {if $parent.blameUrl != null}
+                {sp}[<a href="{$parent.blameUrl}">{msg desc="text for the parent blame link"}blame{/msg}</a>]
+              {/if}
+            </span>
+          </div>
+        </dd>
+      </div>
     {/for}
-  </table>
+  </dl>
 </div>
 {call message_}
   {param className: 'u-pre u-monospace MetadataMessage' /}
@@ -313,27 +329,33 @@
   {@param object: ?}  /** SHA of the object this tag points to. */
   {@param message: ?}  /** tag message. */
 <div class="u-monospace Metadata">
-  <table>
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for tag SHA entry"}tag{/msg}</th>
-      <td class="sha">{$sha}</td>
-      <td>{sp}</td>
-    </tr>
+  <dl class="Metadata-descriptionList">
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for tag SHA entry"}tag{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="sha Metadata-descriptionCell">{$sha}</div>
+        <div class="Metadata-descriptionCell">{sp}</div>
+      </dd>
+    </div>
     {if $tagger}
-      <tr>
-        <th class="Metadata-title">{msg desc="Header for tagger"}tagger{/msg}</th>
-        <td>
-          {call person_ data="$tagger" /}
-        </td>
-        <td>{$tagger.time}</td>
-      </tr>
+      <div class="Metadata-row">
+        <dt class="Metadata-title">{msg desc="Header for tagger"}tagger{/msg}</dt>
+        <dd class="Metadata-description">
+          <div class="Metadata-descriptionCell">
+            {call person_ data="$tagger" /}
+          </div>
+          <div class="Metadata-descriptionCell">{$tagger.time}</div>
+        </dd>
+      </div>
     {/if}
-    <tr>
-      <th class="Metadata-title">{msg desc="Header for tagged object SHA"}object{/msg}</th>
-      <td class="sha">{$object}</td>
-      <td>{sp}</td>
-    </tr>
-  </table>
+    <div class="Metadata-row">
+      <dt class="Metadata-title">{msg desc="Header for tagged object SHA"}object{/msg}</dt>
+      <dd class="Metadata-description">
+        <div class="sha Metadata-descriptionCell">{$object}</div>
+        <div class="Metadata-descriptionCell">{sp}</div>
+      </dd>
+    </div>
+  </dl>
 </div>
 {if $message && length($message)}
   {call message_}