Details window now has a scrollbar when browser window is small

guide.coffee

@@ -9,6 +9,7 @@ STORAGE_PROGRAMS = 'tvgids-programs'
 HOURS_BEFORE = HOURS_AFTER = 2
 DEFAULT_CHANNELS = [1, 2, 3, 4, 31, 46, 92, 36, 37, 34, 29, 18, 91]
 DEFAULT_CHANNELS = _.map(DEFAULT_CHANNELS, String)
+DETAILS_WINDOW_PADDING = 22  # top/margin padding + border clean margin
 
 #
 # Utils
@@ -208,6 +209,8 @@ ProgramDetailsView = Backbone.View.extend(
 
     initialize: (options) ->
         @listenTo(Settings, 'change:selected_program', @toggleDetails)
+        @setBounds()
+        $(window).resize(=> @setBounds())
 
     toggleDetails: ->
         id = Settings.get('selected_program')
@@ -230,9 +233,14 @@ ProgramDetailsView = Backbone.View.extend(
             @$el.hide()
             @$('.content').empty()
 
+    setBounds: ->
+        max = $(window).height() - 2 * DETAILS_WINDOW_PADDING
+        @$('.content').css(maxHeight: max)
+        @alignMiddle()
+
     alignMiddle: ->
-        top = @$('.content').outerHeight() / 2
-        @$('.content').css(marginTop: "-#{top}px")
+        height = @$('.content').outerHeight()
+        @$('.content').css(marginTop: "-#{height / 2}px")
 )
 
 AppView = Backbone.View.extend(

index.php

@@ -110,8 +110,8 @@ function getwday($day) {
                 <% }) %>
             </ul>
             <div class="description"><%= description %></div>
-            Zie ook de <a href="http://www.tvgids.nl/programma/<%= id %>"
-                target="_blank">details</a> op tvgids.nl.
+            <p>Zie ook de <a href="http://www.tvgids.nl/programma/<%= id %>"
+                target="_blank">details</a> op tvgids.nl.</p>
         </script>
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>

style.sass

@@ -263,9 +263,11 @@ $details-initial-offset: 150px
     width: $details-width
     margin: -$details-initial-offset 0 0 (-$details-width / 2)
     border-radius: 6px
-    padding: 10px 15px
+    padding: 12px 15px 0
     font: 12px/18px Helvetica
     box-shadow: 0 0 7px 5px #0f0f0f
+    overflow-x: hidden
+    overflow-y: auto
 
     *
         max-width: $details-width