Starting off strong.

interface/resources/qml/hifi/NameCard.qml

@@ -20,17 +20,27 @@ Column {
     property int displayTextHeight: 18;
     property int usernameTextHeight: 12;
 
+
     RalewaySemiBold {
+        // Properties
         text: parent.displayName;
-        size: parent.displayTextHeight;
         elide: Text.ElideRight;
+        // Size
         width: parent.width;
+        // Text Size
+        size: parent.displayTextHeight;
+        // Text Positioning
+        verticalAlignment: Text.AlignVCenter;
     }
     RalewayLight {
-        visible: parent.displayName;
+        // Properties
         text: parent.userName;
-        size: parent.usernameTextHeight;
         elide: Text.ElideRight;
+        visible: parent.displayName;
+        // Size
+        size: parent.usernameTextHeight;
         width: parent.width;
+        // Text Positioning
+        verticalAlignment: Text.AlignVCenter;
     }
 }

interface/resources/qml/hifi/Pal.qml

@@ -31,13 +31,133 @@ import QtQuick.Controls 1.4
 
 Rectangle {
     id: pal;
-    property int keepFromHorizontalScroll: 1;
+    // Size
-    width: parent.width - keepFromHorizontalScroll;
+    width: parent.width;
     height: parent.height;
-
+    // Properties
-    property int nameWidth: width/2;
+    property int myCardHeight: 75;
-    property int actionWidth: nameWidth / (table.columnCount - 1);
     property int rowHeight: 50;
+    property int nameCardWidth: width*3/5;
+    property int separatorColWidth: 30;
+    property int actionWidth: (width - nameCardWidth - separatorColWidth) / (table.columnCount - 2); // "-2" for Name and Separator cols
+
+    Column {
+        // This NameCard refers to the current user's NameCard (the one above the table)
+        NameCard {
+            id: myCard;
+            // Properties
+            displayName: myData.displayName;
+            userName: myData.userName;
+            // Size
+            width: nameCardWidth;
+            height: myCardHeight;
+            // Positioning
+            anchors.top: pal.top;
+            anchors.left: parent.left;
+            // Margins
+            anchors.leftMargin: 10;
+        }
+        // This TableView refers to the table (below the current user's NameCard)
+        TableView {
+            id: table;
+            // Size
+            height: pal.height - myCard.height;
+            width: pal.width;
+            // Positioning
+            anchors.top: myCard.bottom;
+            // Properties
+            frameVisible: false;
+            sortIndicatorVisible: true;
+            onSortIndicatorColumnChanged: sortModel();
+            onSortIndicatorOrderChanged: sortModel();
+
+            TableViewColumn {
+                role: "displayName";
+                title: "Name";
+                width: nameCardWidth
+            }
+            TableViewColumn {
+                role: "ignore";
+                title: "Ignore"
+                width: actionWidth
+            }
+            TableViewColumn {
+                title: "";
+                width: separatorColWidth
+            }
+            TableViewColumn {
+                visible: iAmAdmin;
+                role: "mute";
+                title: "Mute";
+                width: actionWidth
+            }
+            TableViewColumn {
+                visible: iAmAdmin;
+                role: "kick";
+                title: "Ban"
+                width: actionWidth
+            }
+            model: userModel;
+
+            // This Rectangle refers to each Row in the table.
+            rowDelegate: Rectangle { // The only way I know to specify a row height.
+                height: rowHeight;
+                // The rest of this is cargo-culted to restore the default styling
+                SystemPalette {
+                    id: myPalette;
+                    colorGroup: SystemPalette.Active
+                }
+                color: {
+                    var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base
+                    return styleData.selected?myPalette.highlight:baseColor
+                }
+            }
+
+            // This Item refers to the contents of each Cell
+            itemDelegate: Item {
+                id: itemCell;
+                property bool isCheckBox: typeof(styleData.value) === 'boolean';
+                // This NameCard refers to the cell that contains an avatar's
+                // DisplayName and UserName
+                NameCard {
+                    id: nameCard;
+                    // Properties
+                    displayName: styleData.value;
+                    userName: model.userName;
+                    visible: !isCheckBox;
+                    // Size
+                    width: nameCardWidth;
+                    // Positioning
+                    anchors.left: parent.left;
+                    anchors.verticalCenter: parent.verticalCenter;
+                    // Margins
+                    anchors.leftMargin: 10;
+                }
+                // This Rectangle refers to the cells that contain the action buttons
+                Rectangle {
+                    radius: itemCell.height / 4;
+                    visible: isCheckBox;
+                    color: styleData.value ? "green" : "red";
+                    anchors.fill: parent;
+                    MouseArea {
+                        anchors.fill: parent;
+                        acceptedButtons: Qt.LeftButton;
+                        hoverEnabled: true;
+                        onClicked: {
+                            var newValue = !model[styleData.role];
+                            var datum = userData[model.userIndex];
+                            datum[styleData.role] = model[styleData.role] = newValue;
+                            Users[styleData.role](model.sessionId);
+                            // Just for now, while we cannot undo things:
+                            userData.splice(model.userIndex, 1);
+                            sortModel();
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     property var userData: [];
     property var myData: ({displayName: "", userName: ""}); // valid dummy until set
     property bool iAmAdmin: false;
@@ -135,91 +255,4 @@ Rectangle {
         target: table.selection
         onSelectionChanged: pal.noticeSelection()
     }
-
-    Column {
-        NameCard {
-            id: myCard;
-            width: nameWidth;
-            displayName: myData.displayName;
-            userName: myData.userName;
-        }
-        TableView {
-            id: table;
-            TableViewColumn {
-                role: "displayName";
-                title: "Name";
-                width: nameWidth
-            }
-            TableViewColumn {
-                role: "ignore";
-                title: "Ignore"
-                width: actionWidth
-            }
-            TableViewColumn {
-                title: "";
-                width: actionWidth
-            }
-            TableViewColumn {
-                visible: iAmAdmin;
-                role: "mute";
-                title: "Mute";
-                width: actionWidth
-            }
-            TableViewColumn {
-                visible: iAmAdmin;
-                role: "kick";
-                title: "Ban"
-                width: actionWidth
-            }
-            model: userModel;
-            rowDelegate: Rectangle { // The only way I know to specify a row height.
-                height: rowHeight;
-                // The rest of this is cargo-culted to restore the default styling
-                SystemPalette {
-                    id: myPalette;
-                    colorGroup: SystemPalette.Active
-                }
-                color: {
-                    var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base
-                    return styleData.selected?myPalette.highlight:baseColor
-                }
-            }
-            itemDelegate: Item {
-                id: itemCell;
-                property bool isCheckBox: typeof(styleData.value) === 'boolean';
-                NameCard {
-                    id: nameCard;
-                    visible: !isCheckBox;
-                    width: nameWidth;
-                    displayName: styleData.value;
-                    userName: model.userName;
-                }
-                Rectangle {
-                    radius: itemCell.height / 4;
-                    visible: isCheckBox;
-                    color: styleData.value ? "green" : "red";
-                    anchors.fill: parent;
-                    MouseArea {
-                        anchors.fill: parent;
-                        acceptedButtons: Qt.LeftButton;
-                        hoverEnabled: true;
-                        onClicked: {
-                            var newValue = !model[styleData.role];
-                            var datum = userData[model.userIndex];
-                            datum[styleData.role] = model[styleData.role] = newValue;
-                            Users[styleData.role](model.sessionId);
-                            // Just for now, while we cannot undo things:
-                            userData.splice(model.userIndex, 1);
-                            sortModel();
-                        }
-                    }
-                }
-            }
-            height: pal.height - myCard.height;
-            width: pal.width;
-            sortIndicatorVisible: true;
-            onSortIndicatorColumnChanged: sortModel();
-            onSortIndicatorOrderChanged: sortModel();
-        }
-    }
 }