Use flex positioning for card headings (#479)

In comments within #430, @wchargin proposed that we use flex positioning
to position elements within the header. That seems like a robust idea.

This PR thus uses @wchargin's proposed method to implement @jart's
original, space-efficient design of that makes use of both the left and
right sides of headings (if space is available).

This PR fixes the layout issues brought up in #430. This change also fixes
#421.

Author: chihuahua

tensorboard/components/tf_card_heading/tf-card-heading-style.html

@@ -22,25 +22,29 @@
   <template>
     <style>
 
+      figcaption {
+        width: 100%;
+      }
+
       /** Horizontal line of labels. */
       .heading-row {
         margin-top: -4px;
-        clear: both;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
       }
 
       /** Piece of text in the figure caption. */
       .heading-label {
-        float: left;
+        flex-grow: 1;
         margin-top: 4px;
-        /* TODO(@jart): Use proper width so overflow works. */
-        text-overflow: ellipsis;
-        overflow: hidden;
+        max-width: 100%;
+        word-wrap: break-word;
       }
 
       /** Makes label show on the right. */
       .heading-right {
-        float: right;
-        margin-left: 0.5em;
+        flex-grow: 0;
       }
     </style>
   </template>

tensorboard/components/tf_card_heading/tf-card-heading.html

@@ -41,7 +41,7 @@
   <template>
     <div class="container">
       <figcaption class="content">
-        <div class="row">
+        <div class="heading-row">
           <template is="dom-if" if="[[_nameLabel]]">
             <div itemprop="name" class="heading-label name">
               [[_nameLabel]]
@@ -56,7 +56,7 @@
           </template>
         </div>
         <template is="dom-if" if="[[_tagLabel]]">
-          <div class="row">
+          <div class="heading-row">
             <div class="heading-label">
               tag: <span itemprop="tag">[[_tagLabel]]</span>
             </div>