Bug 722249 - Make long extension names wrap in the fennec add-on manager [r=mfinkle]

mobile/android/chrome/content/aboutAddons.xhtml

@@ -100,7 +100,9 @@
       <img class="favicon"/>
       <div class="inner">
         <div class="details">
-          <div class="title"></div><div class="version"></div><div class="tag"></div>
+          <div class="tag"></div>
+          <div class="title"></div>
+          <div class="version"></div>
         </div>
         <div class="description-full"></div>
       </div>
@@ -201,6 +203,11 @@
         details.className = "details";
         inner.appendChild(details);
 
+        let tagPart = document.createElement("div");
+        tagPart.textContent = gStringBundle.GetStringFromName("addonType." + aAddon.type);
+        tagPart.className = "tag";
+        details.appendChild(tagPart);
+
         let titlePart = document.createElement("div");
         titlePart.textContent = aAddon.name;
         titlePart.className = "title";
@@ -211,11 +218,6 @@
         versionPart.className = "version";
         details.appendChild(versionPart);
 
-        let tagPart = document.createElement("div");
-        tagPart.textContent = gStringBundle.GetStringFromName("addonType." + aAddon.type);
-        tagPart.className = "tag";
-        details.appendChild(tagPart);
-
         if ("description" in aAddon) {
           let descPart = document.createElement("div");
           descPart.textContent = aAddon.description;

mobile/android/themes/core/aboutAddons.css

@@ -98,15 +98,12 @@ body {
 }
 
 .details {
-  display: -moz-box;
-  -moz-box-orient: horizontal;
   width: 100%;
-  margin-top: 8px;
+  padding-top: 8px;
 }
 
 .details > div {
-  display: -moz-box;
-  -moz-box-align: end;
+  display: inline;
 }
 
 .title {
@@ -117,19 +114,15 @@ body {
 .version {
   /* title is not localized, so keep the margin on the left side */
   margin-left: 12px;
-
-  /* push the tag to the end of the box */
-  -moz-box-flex: 1;
-
-  /* compensate for the title baseline */
-  padding-bottom: 1px;
 }
 
 .tag {
-  text-align: end;
+  float: right;
+  margin-left: 12px;
 
   /* compensate for the title baseline */
-  padding-bottom: 1px;
+  position: relative;
+  bottom: -3px;
 }
 
 .description {