Annotations and context labels have to co-exist

2 files changed, 70 insertions, 79 deletions

diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 85f79f18..01659dd8 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -74,23 +74,25 @@
         <p id="t{{line.number}}" class="{{line.css_class}}">{#-#}
             <span class="n"><a href="#t{{line.number}}">{{line.number}}</a></span>{#-#}
             <span class="t">{{line.html}}&nbsp;</span>{#-#}
-            {% if line.annotate -%}
-                <span class="annotate short">{{line.annotate}}</span>{#-#}
-                <span class="annotate long">{{line.annotate_long}}</span>{#-#}
+            {% if line.context_list -%}
+                <input type="checkbox" id="ctxs{{line.number}}" />{#-#}
             {% endif -%}
-            {% if line.contexts -%}
-                <span class="ctx">
-                    {% if line.context_list -%}
-                        <input type="checkbox" id="ctxs{{line.number}}" />
-                    {% endif -%}
-                    <label for="ctxs{{line.number}}">{{ line.contexts_label }}</label>{#-#}
-                    {% if line.context_list -%}
-                        <span class="ctxs">
-                            {% for context in line.context_list -%}
-                                <span>{{context}}</span>{#-#}
-                            {% endfor -%}
-                        </span>{#-#}
-                    {% endif -%}
+            {# Things that should float right in the line. -#}
+            <span class="r">{#-#}
+                {% if line.annotate -%}
+                    <span class="annotate short">{{line.annotate}}</span>{#-#}
+                    <span class="annotate long">{{line.annotate_long}}</span>{#-#}
+                {% endif -%}
+                {% if line.contexts -%}
+                    <label for="ctxs{{line.number}}" class="ctx">{{ line.contexts_label }}</label>{#-#}
+                {% endif -%}
+            </span>{#-#}
+            {# Things that should appear below the line. -#}
+            {% if line.context_list -%}
+                <span class="ctxs">{#-#}
+                    {% for context in line.context_list -%}
+                        <span>{{context}}</span>{#-#}
+                    {% endfor -%}
                 </span>{#-#}
             {% endif -%}
         </p>
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index 3e4283e8..24f7d1a1 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -368,90 +368,79 @@ $context-panel-color: #aaeeff;
                 }
             }
 
-            span.annotate {
-                &.short {
-                    display: inline;
-                    position: absolute;
-                    right: 1.5em;
-                }
-
-                &.long {
-                    @extend %in-text-popup;
-                    max-width: 50%;
-                    width: 30em;
-                    right: 2.5em;
-                }
+            .annotate.long {
+                @extend %in-text-popup;
+                width: 30em;
+                right: 2.5em;
             }
 
-            &:hover span.annotate.long {
+            &:hover .annotate.long {
                 display: block;
             }
         }
 
+        .r {
+            position: absolute;
+            top: 0;
+            right: 2.5em;
+            font-family: verdana, sans-serif;
+        }
 
-        span.annotate {
+        .annotate {
             font-family: georgia;
             color: #666;
-            float: right;
             padding-right: .5em;
         }
 
-        .ctx {
-            font-family: verdana, sans-serif;
-            white-space: nowrap;
-
-            input {
-                display: none;
+        input {
+            display: none;
 
-                & ~ label {
-                    cursor: pointer;
-                    border-radius: .25em;
-                    &::before {
-                        content: "▶ ";
-                    }
-                }
-
-                &:checked ~ label {
-                    background: $context-panel-color;
-                    color: #666;
-                    border-radius: .75em .75em 0 0;
-                    &::before {
-                        content: "▼ ";
-                    }
+            & ~ .r label.ctx {
+                cursor: pointer;
+                border-radius: .25em;
+                &::before {
+                    content: "▶ ";
                 }
+            }
 
-                & ~ .ctxs {
-                    display: none;
+            &:checked ~ .r label.ctx {
+                background: $context-panel-color;
+                color: #666;
+                border-radius: .75em .75em 0 0;
+                padding: .25em .5em;
+                margin: -.25em 0;
+                &::before {
+                    content: "▼ ";
                 }
+            }
 
-                &:checked ~ .ctxs {
-                    display: block;
-                }
+            &:checked ~ .ctxs {
+                display: block;
             }
+        }
 
-            label {
-                color: #999;
-                position: absolute;
-                right: 2.5em;
-                display: inline-block;
-                text-align: right;
-                font-size: .8333em;   // 10/12
-                padding: .25em .5em;
-                &:hover {
-                    background: mix($context-panel-color, #fff, 50%);
-                    color: #666;
-                }
+        label.ctx {
+            color: #999;
+            display: inline-block;
+            padding: 0 .5em;
+            font-size: .8333em;   // 10/12
+            &:hover {
+                background: mix($context-panel-color, #fff, 50%);
+                color: #666;
             }
+        }
 
-            .ctxs {
-                font-family: verdana, sans-serif;
-                background: $context-panel-color;
-                padding: .25em .5em;
-                border-radius: .25em;
-                margin-right: 1.75em;
-                span {
-                    display: block;
-                }
+        .ctxs {
+            display: none;
+            font-family: verdana, sans-serif;
+            white-space: nowrap;
+            background: $context-panel-color;
+            padding: .25em .5em;
+            border-radius: .25em;
+            margin-right: 1.75em;
+            span {
+                display: block;
+                text-align: right;
             }
         }
     }