diff --git a/source/Ox.UI/js/Video/ClipPanel.js b/source/Ox.UI/js/Video/ClipPanel.js
index 606b8519..8cea8dd6 100644
--- a/source/Ox.UI/js/Video/ClipPanel.js
+++ b/source/Ox.UI/js/Video/ClipPanel.js
@@ -10,6 +10,7 @@ Ox.ClipPanel = function(options, self) {
             annotationsMapSize: 256,
             annotationsRange: 'all',
             annotationsSort: 'position',
+            clipRatio: 16/9,
             clips: [],
             clickLink: null,
             duration: 0,
@@ -34,7 +35,7 @@ Ox.ClipPanel = function(options, self) {
             clips: function() {
                 self.$list.options({
                     items: self.options.clips,
-                    sort: self.options.sort,
+                    sort: getListSort(),
                     sortable: isSortable()
                 });
                 updateStatus();
@@ -54,17 +55,97 @@ Ox.ClipPanel = function(options, self) {
             sort: function() {
                 updateSortElement();
                 self.$list.options({
-                    sort: self.options.sort,
+                    sort: getListSort(),
                     sortable: isSortable(),
                 });
             }
         })
         .bindEvent({
-            resize: function() {
+            resize: function(data) {
+                self.$sortSelect.options({width: getSortSelectWidth(data.size)});
                 self.$list.size();
             }
         });
 
+    self.columns = [
+        {
+            align: 'right',
+            id: 'index',
+            operator: '+',
+            title: Ox._('Index'),
+            visible: false,
+            width: 60
+        },
+        {
+            id: 'id',
+            operator: '+',
+            title: Ox._('ID'),
+            unique: true,
+            visible: false,
+            width: 60
+        },
+        {
+            id: 'item',
+            operator: '+',
+            title: Ox._(pandora.site.itemName.singular),
+            visible: true,
+            width: 60
+        },
+        {
+            align: 'right',
+            editable: isEditable,
+            format: function(value, data) {
+                return (
+                    isEditable(data) ? ['', '']
+                    : ['<span class="OxLight">', '</span>']
+                ).join(Ox.formatDuration(value, 3));
+            },
+            id: 'in',
+            operator: '+',
+            title: Ox._('In'),
+            visible: true,
+            width: 90
+        },
+        {
+            align: 'right',
+            editable: isEditable,
+            format: function(value, data) {
+                return (
+                    isEditable(data) ? ['', '']
+                    : ['<span class="OxLight">', '</span>']
+                ).join(Ox.formatDuration(value, 3));
+            },
+            id: 'out',
+            operator: '+',
+            title: Ox._('Out'),
+            visible: true,
+            width: 90
+        },
+        {
+            align: 'right',
+            editable: isEditable,
+            format: function(value, data) {
+                return (
+                    isEditable(data) ? ['', '']
+                    : ['<span class="OxLight">', '</span>']
+                ).join(Ox.formatDuration(value, 3));
+            },
+            id: 'duration',
+            operator: '+',
+            title: Ox._('Duration'),
+            visible: true,
+            width: 90
+        },
+        {
+            align: 'right',
+            id: 'sort',
+            operator: '+',
+            title: Ox._('Sort'),
+            visible: false,
+            width: 60
+        }
+    ];
+
     self.$menubar = Ox.Bar({
             size: 24
         })
@@ -84,9 +165,9 @@ Ox.ClipPanel = function(options, self) {
                     {id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
                 ]},
                 {},
-                {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
-                {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
-                {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length}
+                {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
+                {id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
+                {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'}
             ],
             title: 'set',
             tooltip: Ox._('Options'),
@@ -99,7 +180,14 @@ Ox.ClipPanel = function(options, self) {
         .bindEvent({
             change: function(data) {
                 if (data.id == 'view') {
+                    var action = self.options.editable
+                        && self.options.selected.length
+                        && self.options.view != 'annotations'
+                        ? 'enableItem' : 'disableItem';
                     self.options.view = data.checked[0].id;
+                    self.$menu[action]('split');
+                    self.$menu[action]('join');
+                    self.$menu[action]('replace');
                     self.$panel.replaceElement(1, self.$list = getList());
                     that.triggerEvent('view', {view: self.options.view});
                 }
@@ -117,7 +205,7 @@ Ox.ClipPanel = function(options, self) {
     self.$sortSelect = Ox.Select({
             items: self.options.sortOptions,
             value: self.options.sort[0].key,
-            width: 100 + Ox.UI.SCROLLBAR_SIZE
+            width: getSortSelectWidth(self.options.width)
         })
         .bindEvent({
             change: function(data) {
@@ -248,76 +336,7 @@ Ox.ClipPanel = function(options, self) {
             return $list;
         } else if (self.options.view == 'list') {
             $list = Ox.TableList({
-                columns: [
-                    {
-                        align: 'right',
-                        id: 'index',
-                        operator: '+',
-                        title: Ox._('Index'),
-                        visible: false,
-                        width: 60
-                    },
-                    {
-                        id: 'id',
-                        operator: '+',
-                        title: Ox._('ID'),
-                        unique: true,
-                        visible: false,
-                        width: 60
-                    },
-                    {
-                        id: 'item',
-                        operator: '+',
-                        title: Ox._(pandora.site.itemName.singular),
-                        visible: true,
-                        width: 60
-                    },
-                    {
-                        align: 'right',
-                        editable: isEditable,
-                        format: function(value, data) {
-                            return (
-                                isEditable(data) ? ['', '']
-                                : ['<span class="OxLight">', '</span>']
-                            ).join(Ox.formatDuration(value, 3));
-                        },
-                        id: 'in',
-                        operator: '+',
-                        title: Ox._('In'),
-                        visible: true,
-                        width: 90
-                    },
-                    {
-                        align: 'right',
-                        editable: isEditable,
-                        format: function(value, data) {
-                            return (
-                                isEditable(data) ? ['', '']
-                                : ['<span class="OxLight">', '</span>']
-                            ).join(Ox.formatDuration(value, 3));
-                        },
-                        id: 'out',
-                        operator: '+',
-                        title: Ox._('Out'),
-                        visible: true,
-                        width: 90
-                    },
-                    {
-                        align: 'right',
-                        editable: isEditable,
-                        format: function(value, data) {
-                            return (
-                                isEditable(data) ? ['', '']
-                                : ['<span class="OxLight">', '</span>']
-                            ).join(Ox.formatDuration(value, 3));
-                        },
-                        id: 'duration',
-                        operator: '+',
-                        title: Ox._('Duration'),
-                        visible: true,
-                        width: 90
-                    }
-                ],
+                columns: self.columns,
                 columnsMovable: true,
                 columnsRemovable: true,
                 columnsResizable: true,
@@ -325,18 +344,18 @@ Ox.ClipPanel = function(options, self) {
                 items: self.options.clips,
                 scrollbarVisible: true,
                 selected: self.options.selected,
-                sort: self.options.sort,
+                sort: getListSort(),
                 sortable: isSortable(),
                 unique: 'id'
             });
         } else {
             $list = Ox.IconList({
                 draggable: true,
-                fixedRatio: pandora.site.video.previewRatio,
+                fixedRatio: self.options.clipRatio,
                 item: function(data, sort, size) {
                     size = size || 128; // fixme: is this needed?
                     var ratio = data.videoRatio,
-                        fixedRatio = pandora.site.video.previewRatio,
+                        fixedRatio = self.options.clipRatio,
                         width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
                         height = Math.round(width / ratio),
                         info,
@@ -363,7 +382,7 @@ Ox.ClipPanel = function(options, self) {
                 items: self.options.clips,
                 keys: ['id', 'in', 'out'],
                 orientation: 'both',
-                sort: self.options.sort,
+                sort: getListSort(),
                 unique: 'id'
             });
         }
@@ -431,6 +450,21 @@ Ox.ClipPanel = function(options, self) {
         return $list;
     }
 
+    function getListSort() {
+        var sort = [{key: 'index', operator: '+'}]
+        if (self.options.sort && self.options.sort.length) {
+            sort[0].operator = self.options.sort[0].operator;
+            sort[0].key = Ox.getObjectById(self.columns, self.options.sort[0].key)
+                    ?  self.options.sort[0].key
+                    : 'sort';
+        }
+        return sort;
+    }
+
+    function getSortSelectWidth(width) {
+        return Math.min(144, width - 52 + Ox.UI.SCROLLBAR_SIZE);
+    }
+
     function isEditable(data) {
         return self.options.editable && !data.annotation;
     }
diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index 85b48cfb..ee85fa03 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/source/Ox.UI/js/Video/VideoEditPanel.js
@@ -10,10 +10,9 @@ Ox.VideoEditPanel = function(options, self) {
             annotationsMapSize: 256,
             annotationsRange: 'all',
             annotationsSort: 'position',
+            clipRatio: 16/9,
             clips: [],
             clipSize: 256,
-            clipSort: [],
-            clipSortOptions: [],
             clipTooltip: 'clips',
             clipView: 'list',
             clickLink: null,
@@ -43,6 +42,8 @@ Ox.VideoEditPanel = function(options, self) {
             showTimeline: false,
             showUsers: false,
             smallTimelineURL: '',
+            sort: [],
+            sortOptions: [],
             subtitles: [],
             timeline: '',
             timelineTooltip: 'timeline',
@@ -56,7 +57,7 @@ Ox.VideoEditPanel = function(options, self) {
             clips: function() {
                 self.$clipPanel.options({
                     clips: Ox.clone(self.options.clips),
-                    sort: self.options.clipSort
+                    sort: self.options.sort
                 });
             },
             duration: function() {
@@ -299,6 +300,7 @@ Ox.VideoEditPanel = function(options, self) {
             annotationsMapSize: self.options.annotationsMapSize,
             annotationsRange: self.options.annotationsRange,
             annotationsSort: self.options.annotationsSort,
+            clipRatio: self.options.clipRatio,
             clips: Ox.clone(self.options.clips),
             clickLink: self.options.clickLink,
             duration: self.options.duration,
@@ -313,7 +315,7 @@ Ox.VideoEditPanel = function(options, self) {
             showAnnotationsMap: self.options.showAnnotationsMap,
             showLayers: self.options.showLayers,
             showUsers: self.options.showUsers,
-            sort: self.options.clipSort,
+            sort: self.options.sort,
             sortOptions: self.options.sortOptions,
             view: self.options.clipView,
             width: self.options.clipSize
@@ -356,7 +358,7 @@ Ox.VideoEditPanel = function(options, self) {
                 that.triggerEvent('select', data);
             },
             sort: function(data) {
-                self.options.clipSort = data;
+                self.options.sort = data;
                 that.triggerEvent('sort', data);
             },
             split: function(data) {